title: how to copy table rows in alternate table using jquery
body: <p>I was trying to swap two table rows using jquery, I already did this using javascript but don't know how to do this using jquery. </p>
  
  <p>I did this</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function addTable1(val)
  {
   var newRow = table.insertRow(table.length),
   cell1 = newRow.insertCell(0),
   value = val;
  
   cell1.innerHTML = value;
   clickTable2();
   clickTable1();
  }
  
  function clickTable1()
  {
   for(var i = 1; i &lt; table.rows.length; i++)
   {
    table.rows[i].onclick = function()
    {
     rIndex = this.rowIndex;
     data = this.cells[0].innerHTML;
     addTable2(data);
     removeSelectedRow();
    };
   }
  }
  
  function clickTable2()
  {
   for(var i = 1; i &lt; table2.rows.length; i++)
   {
    table2.rows[i].onclick = function()
    {
     rIndex2 = this.rowIndex;
     data = this.cells[0].innerHTML;
     addTable1(data);
     removeSelectedRow2();
    };
   }
  }
  
  function addTable2(val)
  {
   var newRow = table2.insertRow(table.length),
   cell1 = newRow.insertCell(0),
   value = val;
  
   cell1.innerHTML = val;
   clickTable1();
   clickTable2();
  }
  
  function removeSelectedRow()
  {
   table.deleteRow(rIndex);
  }
  
  function removeSelectedRow2()
  {
   table2.deleteRow(rIndex2);
  }
  
  var rIndex, table = document.getElementById("table");
  var rIndex2, table2 = document.getElementById("table2");
  var data1, data2;
  
  clickTable1();
  clickTable2();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.grid {
      width: 600px;
      height: 500px;
      margin: 0 auto;
      background-color: #fff;
      padding: 10px 50px 50px 50px;
      border-radius: 50px;
      border: 2px solid #cbcbcb;
      box-shadow: 10px 15px 5px #cbcbcb;
  }
  
  .container {
   overflow: hidden
  }
  
  .tab { 
   float: left;
  }
  
  .tab-2 {
   margin-left: 50px 
  }
  .tab-2 input {
   display: block;
   margin-bottom: 10px
  }
  
  tr {
   transition:all .25s ease-in-out
  }
  tr:hover {
   background-color:#EEE;cursor: pointer
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
   &lt;meta charset="utf-8"&gt;
   &lt;title&gt;add row/column&lt;/title&gt;
   &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
   &lt;div class="container"&gt;
    &lt;div class="tab tab-1"&gt;
     &lt;table id="table" border="1"&gt;
      &lt;tr&gt;
       &lt;th&gt;table1 text&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
       &lt;td&gt;A1&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
       &lt;td&gt;B2&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
       &lt;td&gt;C3&lt;/td&gt;
      &lt;/tr&gt;
     &lt;/table&gt;
    &lt;/div&gt;
    &lt;div class="container"&gt;
     &lt;div class="tab tab-2"&gt;
      &lt;table id="table2" border="1"&gt;
       &lt;tr&gt;
        &lt;th&gt;table2 text&lt;/th&gt;
       &lt;/tr&gt;
       &lt;tr&gt;
       &lt;td&gt;1A&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
       &lt;td&gt;2B&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
       &lt;td&gt;3C&lt;/td&gt;
      &lt;/tr&gt;
      &lt;/table&gt;
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  
   &lt;script&gt;
    var rIndex, table = document.getElementById("table");
   &lt;/script&gt;
  
   &lt;script src="app.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>In this code, if you click on a element of table one then that element will copy to another table and also delete from the previous table. I need to do it with jquery. Anyone have any idea?</p>