how to add dynamic row jquery having dynamic dropdown in php

Question

I can add many rows and add event for each text field and add dropdwon dynamically using php successfully at row first.

But I can not duplicate a dynamic dropdown when I click add button also event on dropdown.

Here is Javascript:

    $(document).ready(function () {
    var counter = 1;


    $("#addrow").on("click", function () {
        counter++;

        var newRow = $("<tr>");
        var cols = "";
        cols += "<td><select name='draft_id" + counter + "'><option value=''>Pilih</option></select></td>"; //<select name="draft_id" id="draft_id"></select>
        cols += "<td><input type='text' name='draft_qty" + counter + "' size='3'/></td>";
        cols += "<td><input type='text' name='draft_isi" + counter + "' size='50'/></td>"; //<input type="text" name="draft_isi"/>
        cols += "<td><input type='text' name='harga_satuan" + counter + "' size='8'/></td>"; //<input type="text" name="harga_satuan" id="harga_satuan" />
        cols += "<td><input type='text' name='jumlah" + counter + "' readonly='readonly'/></td>";
        cols += "<td><button type='button' class='deleteRow'>Del</button></td>"; //<button type="button" class="deleteRow">Del</button>
        newRow.append(cols);

        $("table.order-list").append(newRow);
    });

    $("table.order-list").on("change", 'input', function (event) {
        hitungbaris($(this).closest("tr"));
        hitung();

    });

    $("table.order-list").on("click", "button.deleteRow", function (event) {
        $(this).closest("tr").remove();
        hitung();

    });

});

function hitung() { //fungsi hitung ini memiliki 2 fungsi sekaligus yaitu ...:
    hitungGrandTotal();
    hitungsisa();
}

function hitungbaris(row) {
    var harga_satuan = +row.find('input[name^="harga_satuan"]').val();
    var draft_qty = +row.find('input[name^="draft_qty"]').val();
    row.find('input[name^="jumlah"]').val((harga_satuan * draft_qty).toFixed(2));
}

function hitungGrandTotal() {
    var grandTotal = 0;
    $("table.order-list").find('input[name^="jumlah"]').each(function () {
        grandTotal += +$(this).val();
    });
    $("#grandtotal").val(grandTotal.toFixed(2));
}

function hitungsisa() { //bisa juga di gunakan untuk menghitung uang kembali
    //var sisa = "";
    var bayar = parseFloat(document.formpenjualan.bayar.value);
    var grandtotal = parseFloat(document.formpenjualan.grandtotal.value);
    if (bayar < grandtotal){
    //
    sisa = "KREDIT";
    }else{
    //
    sisa = "LUNAS";
    }
    $("#sisa").val(sisa);   
}

HTML

                    <input type="button" id="addrow" value="Tambah Baris" />        
                <table cellspacing="0" cellpadding="3"class="order-list table table-striped responsive-utilities jambo_table bulk_action">
                  <thead>
                    <tr class="headings">
                        <th class="column-title"><div align="center">Draft ID </div></th>
                        <th class="column-title"><div align="center">Qty</div></th>
                        <th class="column-title"><div align="center">Uraian</div></th>
                        <th class="column-title"><div align="center">Harga Satuan </div></th>
                        <th class="column-title"><div align="center">Jumlah</div></th>
                        <th class="column-title"><div align="center">Aksi</div></th>
                    </tr>
                  </thead>

                    <tr>
                        <td>

                                <?php 
                                $result = mysql_query("select * from draft_order");    
                                $jsArrayDO = "var draftID = new Array();\n";
                                ?>
                                <select name="select" onchange="changeValue_draftID(this.value)" class="category-select">
                                  <option>-Pilih-</option>
                                  <?php while ($row = mysql_fetch_array($result)) {
                                    $jsArrayDO .= "draftID['" . $row['draft_id'] . "'] = {draft_qty:'" . addslashes($row['draft_qty']) . "',draft_isi:'".addslashes($row['draft_isi'])."'};\n";?>
                                  <option value="<?php echo $row['draft_id'];?>"><?php echo $row['draft_id'];?></option>
                                  <?php } ?>
                                </select>
                                <script type="text/javascript">
                                <?php echo $jsArrayDO; ?> 
                                function changeValue_draftID(id){
                                document.getElementById('draft_qty').value = draftID[id].draft_qty;  
                                document.getElementById('draft_isi').value = draftID[id].draft_isi;  
                                };  
                                </script>

                                </td>
                        <td><input type="text" name="draft_qty" id="draft_qty" size="3"/></td>
                        <td><input type="text" name="draft_isi" id="draft_isi" size="50"/></td>
                        <td><input type="text" name="harga_satuan" id="harga_satuan" size="8"/></td>
                        <td align="right"><input type="text" name="jumlah" id="jumlah" readonly="readonly"/></td>
                        <td><button type="button" class="deleteRow">Del</button></td>
                    </tr>
                    <tfoot>
                    <tr>
                        <td>&nbsp;</td>
                        <td align="right">&nbsp;</td>
                        <td align="right">&nbsp;</td>
                        <td align="right" valign="middle">Grand Total : </td>
                        <td><input name="grandtotal" type="text" id="grandtotal" readonly="readonly"/></td>
                        <td align="right">&nbsp;</td>
                    </tr>
                    <tr>
                      <td align="right">&nbsp;</td>
                      <td align="right">&nbsp;</td>
                      <td align="right">&nbsp;</td>
                      <td align="right" valign="middle">Bayar : </td>
                      <td><input name="bayar" type="text" id="bayar" /></td>
                      <td align="right">&nbsp;</td>
                  </tr>
                    <tr>
                      <td align="right"></td>
                      <td align="right">&nbsp;</td>
                      <td align="right">&nbsp;</td>
                      <td align="right" valign="middle">Sisa : </td>
                      <td><input name="sisa" type="text" id="sisa"readonly="readonly"/></td>
                      <td align="right">&nbsp;</td>
                  </tr>
                  </tfoot>
                </table>

you can see the code at JSFIDDLE

Please Help me how to clone/add dynamic dropdown using php as row first.

Need Help

Thank You

Answer 1

using jquery function .clone() then insert after insertAfter() - or appendTo() the parent DOM element select.clone().appendTo(select.parent()); JSFiddle - you can copy/paste the drop down as shown in this JSFiddle

 var select = $('.test'); $('#btn1').on('click', function () { select.clone().insertAfter(select); }); 

 #btn1 { display:block; margin-bottom:10px; } .test{ display:block; margin-bottom:5px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <button id="btn1">Duplicate</button> <select class="test"> <option value="1">option 1</option> <option value="2">option 2</option> <option value="3">option 3</option> <option value="4">option 4</option> <option value="5">option 5</option> </select> 

---

Update: check this PHP Fiddle , it demonstrates something similar to your problem, a dynamically generated drop-down that could be obtained from a database query or JSON response.

However if you want to duplicate the whole set of the text inputs as well as the the dynamically generated drop-down then check this PHP Fiddle 2 which shows how to grab the inner html of the container div at first then append additional set of inputs and select.

---

UPDATE 2: Upon a comment

To give each drop-down list a unique id , give the first dynamically generated drop-down an id of use this js code instead:

var html = $('#container').html(),
    id = $('.test').first().attr('id');
    id = id.replace(/drop/, '');
$('#btn1').on('click', function () {
    $('#container').append(html);
    id++;
    $('.test').last().attr('id', 'drop' + id);
});

As in this PHP Fiddle 3 , check the console log to see each one's id