copy one table row input data to another table row simultaneously

Question

I have developed two tables "TABLE1" and "TABLE2". I want if i enter subject name in Table 1 then it will automatically copy in Table 2 and if click on "Add new+" button of Table1 to add new row then this change will happen on Table2.

 $("#insert66").click(function () { $("#table66").each(function () { var tds = '<tr>'; jQuery.each($('tr:last td', this), function () { tds += '<td>' + $(this).html() + '</td>'; }); tds += '</tr>'; if ($('tbody', this).length > 0) { $('tbody', this).append(tds); } else { $(this).append(tds); } }); }); 

 Table1:- <table id="table66" class="table table-bordered table-hover"> <input type="button" class="btn green" value="Add New+" id="insert66"></input> <thead> <th>Subject Name</th> </thead> <tbody> <tr> <td> <input type="text" class="form-control subName" name="subName"> </td> </tr> </tbody> </table> Table2:- <table id="tablecourse" class="table table-striped table-hover"> <thead> <tr> <th>Subject Name</th> <th>Campus</th> </tr> </thead> <tbody> <tr> <td> <input type="text" class="form-control subName" name="subName"> </td> <td> <select id="multipleSelectExample4" style="width:100%;" data-placeholder="Select an option"> <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> </td> </tr> </tbody> </table> 

I have found one logic but bit clueless how to use this

var counterClass = 0
$("#table66 input").change(function(){

 if($(this).hasClass("completed")) {
// update
 $("." + $(this).attr("refClass")).html($(this).val())
 } else {
 // append/insert

 $(this).addClass("completed").attr("refClass", "refClass" + counterClass)
 counterClass += 1

 $().append()

 }
 })

Answer 1

Try with index() match .Apply the Append function in both table. $('table').each() .First table input value reflect with second table input value with same index match

update

3 table function. Dont forget to new table id in this function see below snippet

 $(document).ready(function(){ $("#insert66").click(function() { $(".table").each(function() { var tds = '<tr>'; jQuery.each($('tr:last td', this), function() { tds += '<td>' + $(this).html() + '</td>'; }); tds += '</tr>'; if ($('tbody', this).length > 0) { $('tbody', this).append(tds); } else { $(this).append(tds); } }); }); $('table').on('input','.subName',function(){ var index =$(this).closest('table').find('input').index(this); $('#tablecourse').find('input[type=text]').eq(index).val($(this).val()) //for second table $('#table3').find('input[type=text]').eq(index).val($(this).val()) //for 3rd table }) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> Table1:- <table id="table66" class="table table-bordered table-hover"> <input type="button" class="btn green" value="Add New+" id="insert66"></input> <thead> <th>Subject Name</th> </thead> <tbody> <tr> <td> <input type="text" class="form-control subName" name="subName"> </td> </tr> </tbody> </table> Table2:- <table id="tablecourse" class="table table-striped table-hover"> <thead> <tr> <th>Subject Name</th> <th>Campus</th> </tr> </thead> <tbody> <tr> <td> <input type="text" class="form-control subName" name="subName"> </td> <td> <select id="multipleSelectExample4" style="width:100%;" data-placeholder="Select an option"> <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> </td> </tr> </tbody> </table> Table3:- <table id="table3" class="table table-striped table-hover"> <thead> <tr> <th>Subject Name</th> <th>Campus</th> </tr> </thead> <tbody> <tr> <td> <input type="text" class="form-control subName" name="subName"> </td> <td> <select id="multipleSelectExample4" style="width:100%;" data-placeholder="Select an option"> <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> </td> </tr> </tbody> </table> 

Answer 2

Try this one. if you need any help just ask :)

I've add a invisible template row. This will be added when ever you click the Add-Button. And a function to copy the text from one input field to the other.

 function addRow() { $('#table1').append('<tr>'+$('#table1 tr.template').html()+'</tr>'); $('#table2').append('<tr>'+$('#table2 tr.template').html()+'</tr>'); } function updateTabel(source, id){ var text = $(source).val(); var row = $(source).closest('tr').index(); $($('#'+id+' tr')[row]).find('input.subName').val(text); } 

  .template { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="button" value="Add New" onclick="addRow()" /><br> <br> Table1:- <table id="table1"> <tr> <th>Subject Name</th> </tr> <tr class="template"> <td> <input type="text" class="subName" onKeyUp="updateTabel(this, 'table2')"> </td> </tr> </table> Table2:- <table id="table2"> <tr> <th>Subject Name</th> <th>Campus</th> </tr> <tr class="template"> <td> <input type="text" class="form-control subName" onKeyUp="updateTabel(this, 'table1')"> </td> <td> <select id="multipleSelectExample4" style="width:100%;" data-placeholder="Select an option"> <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> </td> </tr> </table>