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>