<table id="treatmentTable<?php echo $row_history['appointment_id']?>" class="table table-bordered table-hover"> <thead> <tr class="active"> <th>Item</th> <th>Qty</th> <th>Remarks</th> <th></th> </tr> </thead> <tbody> <?php $sql_treatment="select * from treatment where appointment_id='".$row_history['appointment_id']."' and is_display!='N' order by treatment_id"; $result_treatment = mysqli_query($conn,$sql_treatment); $num_rows_treatment=@mysqli_num_rows($result_treatment); $tCount =0; while($row_history_treatment=@mysqli_fetch_array($result_treatment)) { extract($row_history_treatment); ?> <tr> <td class="col-sm-3"> <select class="chosen-select form-control" id="treatment_item0"name="treatment_item0" data-placeholder="Choose a treatment..." style="display: none;"> <option value=""> </option> <?php echo generateOption('tbl_items','item_name','item_id',$row_history_treatment['item_id'],''); ?> </select> </td> <td class="col-sm-4"> <input type="number" name="treatment_item_qty<?php echo $tCount?>" id="treatment_item_qty<?php echo $tCount?>" value="<?php echo $row_history_treatment['item_qty']?>" class="col-xs-4"/> </td> <td class="col-sm-5"> <input type="text" name="treatment_item_remarks<?php echo $tCount?>" id="treatment_item_remarks<?php echo $tCount?>" value="<?php echo $row_history_treatment['remarks']?>" class="form-control"/> </td> <td class="col-sm-1"><a class="deleteRow"></a> </td> </tr> <?php $tCount++; } ?> </tbody> <tfoot> <tr> <td colspan="5" style="text-align: left;"> <input type="button" class="btn btn-lg btn-block " id="addrow<?php echo $row_history['appointment_id']?>" value="Add Row" /> <input type="hidden" name="count_treatment_item" id="count_treatment_item<?php echo $row_history['appointment_id']?>" value="<?php echo $tCount?>" /> </td> </tr> <tr> </tr> </tfoot> </table> <script type="text/javascript"> $(document).ready(function () { var counter = $("#count_treatment_item<?php echo $row_history['appointment_id']?>").val(); var itemOptions="<?php echo generateOption('tbl_items','item_name','item_id','',''); ?>"; $("#addrow<?php echo $row_history['appointment_id']?>").on("click", function () { var newRow = $("<tr>"); var cols = ""; var select_treatment=""; select_treatment+="<select "; select_treatment+="id=\"treatment_item<?php echo $row_history['appointment_id']?>_"+counter+"\"name=\"treatment_item"+counter+"\"data-placeholder=\"Choose a treatment...\""; //select_treatment+="style=\"display: none;\""; select_treatment+=">"; select_treatment+="<option value=\"\"> </option>"; select_treatment+=itemOptions select_treatment+="</select>"; cols += '<td>'+select_treatment+'</td>'; cols += '<td><input type="number" class="col-xs-4" name="treatment_item_qty' + counter + '"/></td>'; cols += '<td><input type="text" class="form-control" name="treatment_item_remarks' + counter + '"/></td>'; cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger " value="Delete"></td>'; newRow.append(cols); $("#treatmentTable<?php echo $row_history['appointment_id']?>").append(newRow); $('#treatment_item<?php echo $row_history['appointment_id']?>_'+counter).chosen({allow_single_deselect:true}); $('#treatment_item<?php echo $row_history['appointment_id']?>_'+counter).next().css({'width': $('#treatment_item<?php echo $row_history['appointment_id']?>_'+counter).parent().width()}); counter++; $("#count_treatment_item<?php echo $row_history['appointment_id']?>").val(counter); }); $("table.order-list").on("click", ".ibtnDel", function (event) { $(this).closest("tr").remove(); // counter -= 1 }); }); </script>