如何使用jquery add函数添加动态数据？

Question

I have this code where I used jQuery code to duplicate a table, the original table is working fine with php fetch query, but the duplication process doesn't work if i add php code to it, but if the php code removed it works.

  <form action="" method="post" name="addusers" id="addusers">
            <div class="felements"><select name="proname" type="text" required class="tfield2" id="proname">
                <option id="0">-- Select Provider --</option>
                <?php $prov = $con->query("SELECT * FROM providers"); while ($vall = mysqli_fetch_array($prov)){ ?> 

                <option id="<?php echo $vall ['ID'];?>">
                    <?php echo $vall ['provname']?>
                </option>
                <?php } ?>
            </select></div>

            <div class="felements"><input name="invodate" type="text" required class="tfield" id="invodate" placeholder="Invoice Date"/>
                </div>
                    <div class="felements"><input name="Save" type="submit" class="button" value="Save" style="width: 91%;"></div>

        <table class="table table-borderd table-hover felements">
            <thead>
                <th>Company Name</th>
                <th>Claimed Amount</th>
                <th>Exchange Rate</th>
                <th>Claimed Amount (LYD)</th>
                <th>Insurance Type</th>
                <th><input type="button" value="+" id="add" class="btn btn-primary"></th>
            </thead>
            <tbody class="detail">
                <tr>
                    <td><select name="comname[]" type="text" class="form-control comname"><option id="0">-- Select Company --</option> 
                <?php $comp = $con->query("SELECT * FROM companys"); while ($vall = mysqli_fetch_array($comp)){?><option id="<?php echo $vall ['ID'];?>">           <?php echo $vall ['company']?></option><?php } ?></select></td>
                    <td><input name="claimed[]" type="text" class="form-control claimed" required placeholder="Invoice Amount"/></td>
                    <td><input name="rate[]" type="text" class="form-control rate" required placeholder="EX Rate"/></td>
                    <td><input name="netclaimed[]" type="text" class="form-control netclaimed" required placeholder="Invoice Amount"/></td>
                    <td><select name="reinsurer[]" type="text" class="form-control reinsurer">
                        <option id="0">-- Select Reinsurer --</option>
                        <option id="1">تكافلي</option>
                        <option id="2">تجاري</option>
                        </select></td>
                    <th><input type="button" value="-" id="remove" class="btn btn-primary"></th>
                </tr>
            </tbody>
            <tfoot>
                <th></th>
                <th></th>
                <th>Total</th>
                <th class="total">0</th>
                <th>LYD</th>
                <th></th>
            </tfoot>
        </table>

        </form>





    <?php require('../includes/footer.php'); ?>

    <script type="text/javascript">
        $(function(){
            $('#add').click(function(){
                addnewrow();
            });

            $('body').delegate('#remove','click',function(){
                $(this).parent().parent().remove();
            });

            $('.detail').delegate('.claimed, .rate', 'keyup',function(){
                var tr = $(this).parent().parent();
                var qty = tr.find('.claimed').val();
                var rate  = tr.find('.rate').val();
                var amt  = (qty * rate);
                tr.find('.netclaimed').val(amt);
                total();
        });

    });  

        function total(){
            var t = 0;
            $('.netclaimed').each(function(i,e) 
            {
                var amt = $(this).val()-0;
                t += amt;  
            }); 
            $('.total').html(t);
        }


        function addnewrow()
        {
            var tr = '<tr>'+
                     '<td><select name="comname[]" type="text" class="form-control comname"><option id="0">-- Select Company --</option>                                          <option id=""></option></select></td>'+
                     '<td><input name="claimed[]" type="text" class="form-control claimed" required placeholder="Invoice Amount"/></td>'+
                     '<td><input name="rate[]" type="text" class="form-control rate" required placeholder="EX Rate"/></td>'+
                     '<td><input name="netclaimed[]" type="text" class="form-control netclaimed" required placeholder="Invoice Amount"/></td>'+
                     '<td><select name="reinsurer[]" type="text" class="form-control reinsurer"><option id="0">-- Select Reinsurer --</option>       <option id="1">تكافلي</option><option id="2">تجاري</option></select></td>'+
                     '<th><input type="button" value="-" id="remove" class="btn btn-primary"></th>'+
                     '</tr>';
                $('.detail').append(tr);
            }
    </script>

Answer 1

You either need to AJAX the content if the selects are different OR clone instead of inserting static rows:

function addnewrow() {
  $('.detail').append($("tbody.detail tr:eq(0)").clone());
}

FIDDLE