Add/remove row dynamically with drop down in it using javascript

I have project that I must make form that user can add education in it. I succeed to add and remove dynamically with (just) input in it, but I get problem when I put drop down list in it. The code is work, but I can't get any option when I click my dropdown.

see the screenshot here: https://www.dropbox.com/s/q58ic9jvq2sqofh/Capture.JPG

HTML

<h3>Pendidikan</h3>
        <table id="pendidikan">
            <input type="button" value="Tambah Data" onClick="addRow('pendidikan')" />
            <input type="button" value="Hapus Data" onClick="deleteRow('pendidikan')" />
            <thead>
                    <tr>
                        <th></th>
                        <th>Jenjang</th>
                        <th>Nama Institusi</th>
                        <th>Kota</th>
                        <th>Tahun</th>
                    </tr>
                </thead>
            <tbody>
                <tr>
                    <td>
                        <input type="checkbox" name="chk[]"/>
                    </td>
                    <td>
                        <select name="jenjang[]">
                            <option value="sd">Sekolah Dasar</option>
                            <option value="smp">Sekolah Menengah Pertama</option>
                            <option value="sma">Sekolah Menengah Atas</option>
                            <option value="d3">Perguruan Tinggi (D3)</option>
                            <option value="s1">Perguruan Tinggi (D4/S1)</option>
                            <option value="s2">Perguruan Tinggi (S2)</option>
                            <option value="s3">Perguruan Tinggi (S3)</option>
                        </select>
                    </td>
                    <td>
                        <input id="pendidikan" name="pendidikan[]"type="text" size="30" maxlength="30"/>
                    </td>
                    <td>
                        <input id="pendidikanDi" name="pendidikanDi[]" style="width: 200px;" type="text"  size="30" maxlength="30"/>
                    </td>
                    <td>
                        <input id="pendidikanTahun" name="pendidikanTahun[]" style="width: 200px;"type="text" size="30" maxlength="30"/>
                    </td>
                </tr>

            </tbody>
        </table>

Javascript

function addRow(tableID) {

        var table = document.getElementById(tableID);

        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

        var cell1 = row.insertCell(0);
        var element1 = document.createElement("input");
        element1.type = "checkbox";
        element1.name="chkbox[]";
        cell1.appendChild(element1);

        var cell2 = row.insertCell(1);
        var element2 = document.createElement("select");
        element2.name="jenjang[]";
        cell2.appendChild(element2);

        var cell3 = row.insertCell(2);
        var element3 = document.createElement("input");
        element3.type = "text";
        element3.name = "pendidikan[]";
        cell3.appendChild(element3);

        var cell4 = row.insertCell(3);
        var element4 = document.createElement("input");
        element4.type = "text";
        element4.name = "pendidikanDi[]";    
        cell4.appendChild(element4);

        var cell5 = row.insertCell(4);
        var element5 = document.createElement("input");
        element5.type = "text";
        element5.name = "pendidikanTahun[]";
        cell5.appendChild(element5);


    }

    function deleteRow(tableID) {
        try {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;

        for(var i=0; i<rowCount; i++) {
            var row = table.rows[i];
            var chkbox = row.cells[0].childNodes[0];
            if(null != chkbox && true == chkbox.checked) {
                table.deleteRow(i);
                rowCount--;
                i--;
            }


        }
        }catch(e) {
            alert(e);
        }
    }

Thanks for your advance!