如何再次使用按钮追加同一张表，以及如何在另一张表中排行该表的数据

Question

I have developed a form where I am using some tables to get data where some key points related to these tables are:-

1. "AddNew2" button is for adding one more table like table 2 . Number of rows in Table 2 and all other tables added by using Addnew2 button will be increase if i click "AddNew1" Button of Table 1.

2. Table 1 is master table of getting same employee name is all tables. which means if I click "AddNew1" button then there will new row added in table 1 , table 2 and other tables and whatever employee name i am tyoing in table 1 will be copy in same in table 2 and other tables.

But I am facing some issues which are:-

1. Whatever employee name i am typing in table 1, is coming perfectly in table 2 but it is not coming in table 3 , table 4 (which I added by clicking AddNew2 button.)

2. If I click AddNew1 button to add new row in table 1 , than one more row is increasing in Table 2 (say now table 1 and table 2 has 2-2 row). but now if I click in AddNew2 button to add same table like Table 2 than that Table is coming with only one table.

I am not able to solve this issue. I have added my code here as well please have a look.

 $(document).ready(function() { $("#insert66").click(function() { $(".copySubName tbody").append('<tr> <td> <input type="text" class="form-control EmpName" name="EmpName"> </td></tr>') $("#tableboth tbody").append('<tr> <td> <input type="text" class="form-control EmpName" disabled="true" name="EmpName"> </td> <td> <input type="text" class="form-control years allownumericwithoutdecimal" maxlength="3" name="years"> </td> <td> <input type="checkbox" id="mandatorySub"> </td> </tr>') }); $('.copySubName').on('input', '.EmpName', function() { var index = $(this).closest('table').find('input').index(this); //for second table $('#tableboth').find('.EmpName').eq(index).val($(this).val()) //for 3rd table }); }); $("#insert17").click(function() { $(".individualSalSection").append(' <div class="portlet-body individual individualMarksSectionSub"><label class="label1 col-md-12 individual labelBoardName" style="display:none"> Enter Board Name </label><input type="text" class="form-control individual boardName"></input> <table id="tableboth" class="arrSubjects table table-striped table-hover arrSubjects individual"> <thead> <th>Employee</th> <th> Marks</th> <th> is mandatory</th> </thead> <tbody> <tr> <td> <input type="text" class="form-control EmpName" disabled="true" name="subject1"> </td> <td> <input type="text" class="form-control years allownumericwithoutdecimal" maxlength="3" name="years"> </td> <td> <input type="checkbox" id="mandatorySub"> </td> </tr> </tbody></table></div>') }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> Table 1:- <table id="table66" class="table table-bordered table-hover copySubName"> <input type="button" class="btn green" value="Add New+" id="insert66"></input> <thead> <th>Employee Name</th> </thead> <tbody> <tr> <td> <input type="text" class="form-control EmpName" name="EmpName"> </td> </tr> </tbody> </table> <div class="portlet light portlet-fit box individual individualSalSection"> <input type="button" class="btn green individual" value="Add New+" id="insert17"></input> <div class="portlet-body individual individualSalSectionSub"> <label class="label1 col-md-12 individual labelBoardName" style="display:none"> Enter Board Name </label> <input type="text" class="form-control individual boardName"></input> Table2: <table id="tableboth" class="arrSubjects table table-striped table-hover arrSubjects individual"> <thead> <th>Employee</th> <th> Marks</th> <th> is mandatory</th> </thead> <tbody> <tr> <td> <input type="text" class="form-control EmpName" disabled="true" name="EmpName"> </td> <td> <input type="text" class="form-control years allownumericwithoutdecimal" maxlength="3" name="years"> </td> <td> <input type="checkbox" id="mandatorySub"> </td> </tr> </tbody> </table> </div> </div> 

Answer 1

As your question is not clear, so I am not sure what should be the correct solution, for you, please try below code and check whether you are looking for this. I have added each method to add employee name in new tables as well -

Fiddle

 $(document).ready(function() { $("#insert66").click(function() { $(".copySubName tbody").append('<tr> <td> <input type="text" class="form-control EmpName" name="EmpName"> </td></tr>') $("#tableboth tbody").append('<tr> <td> <input type="text" class="form-control EmpName" disabled="true" name="EmpName"> </td> <td> <input type="text" class="form-control years allownumericwithoutdecimal" maxlength="3" name="years"> </td> <td> <input type="checkbox" id="mandatorySub"> </td> </tr>') }); $('.copySubName').on('input', '.EmpName', function() { var index = $(this).closest('table').find('input').index(this); var that = $(this); //for second table $('.tableboth').each(function(index,obj){ $(obj).find('.EmpName').val(that.val())}) //for 3rd table }); }); $("#insert17").click(function() { $(".individualSalSection").append(' <div class="portlet-body individual individualMarksSectionSub"><label class="label1 col-md-12 individual labelBoardName" style="display:none"> Enter Board Name </label> <table class="tableboth" class="arrSubjects table table-striped table-hover arrSubjects individual"> <thead> <th>Subject</th> <th> Marks</th> <th> is mandatory</th> </thead> <tbody> <tr> <td> <input type="text" class="form-control EmpName" disabled="true" name="subject1"> </td> <td> <input type="text" class="form-control years allownumericwithoutdecimal" maxlength="3" name="years"> </td> <td> <input type="checkbox" id="mandatorySub"> </td> </tr> </tbody></table></div>') }); 

 Table 1:- <table id="table66" class="table table-bordered table-hover copySubName"> <input type="button" class="btn green" value="Add New+" id="insert66"></input> <thead> <th>Employee Name</th> </thead> <tbody> <tr> <td> <input type="text" class="form-control EmpName" name="EmpName"> </td> </tr> </tbody> </table> <div class="portlet light portlet-fit box individual individualSalSection"> <input type="button" class="btn green individual" value="Add New+" id="insert17"></input> <div class="portlet-body individual individualSalSectionSub"> <label class="label1 col-md-12 individual labelBoardName" style="display:none"> Enter Board Name </label> <input type="text" class="form-control individual boardName"></input> Table2: <table class="tableboth arrSubjects table table-striped table-hover arrSubjects individual"> <thead> <th>Subject</th> <th> Marks</th> <th> is mandatory</th> </thead> <tbody> <tr> <td> <input type="text" class="form-control EmpName" disabled="true" name="EmpName"> </td> <td> <input type="text" class="form-control years allownumericwithoutdecimal" maxlength="3" name="years"> </td> <td> <input type="checkbox" id="mandatorySub"> </td> </tr> </tbody> </table> </div> </div>