<style>
        #termine {
            border-collapse: collapse;
        }

        select {
            margin: 10% 10% 0% 10%;
            width: 70%;
            padding: 5%;
            padding-right: auto;
            padding-left: auto;
            display: block;
        }
        #wrtermine {
            overflow: hidden;
            display: none;
        }
    </style>

    <button id="btntermine">Termine anzeigen/verstecken</button>
    <div id="wrtermine">
        <table id="termine">
            <thead>
                <tr>
                    <th><strong>Thema</strong></th>
                    <th><strong>Datum</strong></th>
                    <th><strong>Uhrzeit</strong></th>
                    <th><strong>Ort</strong></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Beispiel</td>
                    <td id="Datum1">21.12.2016</td>
                    <td>12:15</td>
                    <td>Kursort 1</td>
                </tr>
                <tr class="zweitezeile">
                    <td>Beispiel</td>
                    <td id="Datum2">15.12.2016</td>
                    <td>13:45</td>
                    <td>Kursort 2</td>
                </tr>
                <tr>
                    <td>Beispiel</td>
                    <td id="Datum3">04.01.2017</td>
                    <td>12:15</td>
                    <td>Kursort 1</td>
                </tr>
                <tr class="zweitezeile">
                    <td>Beispiel</td>
                    <td id="Datum4">03.03.2016</td>
                    <td>12:15</td>
                    <td>Kursort 2</td>
                </tr>
                <tr>
                    <td>Beispiel</td>
                    <td id="Datum5">05.01.2017</td>
                    <td>12:15</td>
                    <td>Kursort 1</td>
                </tr>
            </tbody>
        </table>
    </div>

    <div id="sidebar">
        <h4>Neue Termine:</h4>
        <table id="sidebartabelle">
            <tr>
                <td id="sThema">Soul Movements</td>
            </tr>
            <tr class="zweitezeile">
                <td id="sDatum">15.11.2017</td>
            </tr>
            <tr>
                <td id="sUhrzeit">12:35</td>
            </tr>
            <tr class="zweitezeile">
                <td id="sOrt">Kursort 2</td>
            </tr>
        </table>
    </div>
    <h3 id="Anmeldung">Anmeldung:</h3>
    <form>
        <input type="name" placeholder="Name" required>
        <input type="name" placeholder="Vorname" required>
        <select id="terminauswahl"></select>
        <input type="email" placeholder="E-Mail" required>
        <input type="submit" placeholder="Senden" id="ud_send">
    </form>
    <script>
        $("#btntermine").on("click", function () {
            $("#wrtermine").slideToggle(500);
        });
        function myParseDate(rows, rowIdx) {
            var datearr = rows[rowIdx].cells[1].innerHTML.split(".");
            var timearr = rows[rowIdx].cells[2].innerHTML.split(":");
            return new Date(parseInt(datearr[2]), parseInt(datearr[1]) - 1, parseInt(datearr[0]), parseInt(timearr[0]), parseInt(timearr[1]), 0);
        }
        var now = new Date().getTime();
        var rows = document.getElementById("termine").rows;
        var nextTime = new Date(2099, 0, 1).getTime();
        var rowIdx = -1;
        for (var i = 1; i < rows.length; i++) {
            var currentTime = myParseDate(rows, i).getTime();
            if (currentTime < nextTime && currentTime > now) {
                rowIdx = i;
                nextTime = currentTime;
            }
        }
        console.log(rowIdx);
        if (rowIdx != -1) {
            rows[rowIdx].style.backgroundColor = "mistyrose";
            rows[rowIdx].style.border = "thin solid red";
        }

        document.getElementById("sThema").innerHTML = rows[rowIdx].cells[0].innerHTML;
        document.getElementById("sDatum").innerHTML = rows[rowIdx].cells[1].innerHTML;
        document.getElementById("sUhrzeit").innerHTML = rows[rowIdx].cells[2].innerHTML;
        document.getElementById("sOrt").innerHTML = rows[rowIdx].cells[3].innerHTML;

        var terminauswahl = document.getElementById("terminauswahl");
        terminauswahl.innerHTML = "";
        for (var i = 0; i < rows.length; i++) {
            var currentTime = myParseDate(rows, i).getTime();
            if (currentTime > now || i == 0) {
                var timeStr = rows[i].cells[1].innerHTML + " " + rows[i].cells[2].innerHTML;
                var opt = document.createElement("option");
                opt.value = timeStr;
                opt.innerHTML = timeStr;
                terminauswahl.appendChild(opt);
            }
        }

        var params = {
            sThema: rows[rowIdx].cells[0].innerHTML,
            sDatum: rows[rowIdx].cells[1].innerHTML,
            sUhrzeit: rows[rowIdx].cells[2].innerHTML,
            sOrt: rows[rowIdx].cells[3].innerHTML
        };
        $.post("sidebar-schreiben.php", params, function (data) {
            var s = data;
        });

    </script>