title: Getting back same row format
body: <p>I have this code below that allows me to move the value from <code>Green Fruits Table</code> to <code>Suggested Fruits Table</code> and vice versa but the problem is that after I move all the value from <code>Suggested Fruits Table</code> to <code>Green Fruit Table</code> all the value comes back as a single column and i want it to follow the original format which is 3 cells in a row. Is there any easy way to accomplish this? Any help would be greatly appreciated.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var obj = {};
  var obj2 = {};
  var obj3 = {};
  
  var key = "Red Fruits";
  obj[key] = ['Apple', 'Cherry', 'Strawberry', 'Cranberry', 'Tomato'];
  var myArray = [];
  myArray.push(obj);
  
  var key2 = "Green Fruits";
  obj3[key2] = ['Watermelon', 'Durian', 'Avacado', 'Kiwi', 'HoneyDew'];
  var myArray2 = [];
  myArray2.push(obj3);
  
  var key3 = "Random Fruits";
  obj2[key3] = ['Pomegranate', 'Honeydew', 'Plum', 'Mango', 'Lime', 'Pineapple', 'Starfruit', 'Cantaloupe', 'Blueberry'];
  var myArray3 = [];
  myArray3.push(obj2);
  
  function redraw(obj3) {
  
    var bodyString = '&lt;tr&gt;';
    var headString = '';
    $.each(obj[key], function(index) {
      if (index % 3 == 0 &amp;&amp; index &gt; 0) {
        bodyString += ('&lt;/tr&gt;&lt;tr&gt;');
      }
      bodyString += ('&lt;td&gt;' + obj[key][index] + '&lt;/td&gt;');
    });
    bodyString += '&lt;/tr&gt;';
    headString += ('&lt;tr&gt;&lt;th colspan="' + obj[key].length + '"&gt;' + 'Red Fruits' + '&lt;/th&gt;&lt;/tr&gt;');
    $('.redclass tbody').html(bodyString);
    $('.redclass thead').html(headString);
  
    var bodyString2 = '&lt;tr&gt;';
    var headString2 = '';
    $.each(obj3[key2], function(index) {
      if (index % 3 == 0 &amp;&amp; index &gt; 0) {
        bodyString2 += ('&lt;/tr&gt;&lt;tr&gt;');
      }
      bodyString2 += ('&lt;td class = "greenpilltable"&gt;' + obj3[key2][index] + '&lt;/td&gt;');
    });
    bodyString2 += '&lt;/tr&gt;';
    headString2 += ('&lt;tr&gt;&lt;th colspan="' + obj3[key2].length + '"&gt;' + 'Green Fruits' + '&lt;/th&gt;&lt;/tr&gt;');
    $('.greenclass tbody').html(bodyString2);
    $('.greenclass thead').html(headString2);
  
    var bodyString3 = '&lt;tr&gt;';
    var headString3 = '';
    $.each(obj2[key3], function(index) {
      if (index % 6 == 0 &amp;&amp; index &gt; 0) {
        bodyString3 += ('&lt;/tr&gt;&lt;tr&gt;');
      }
      bodyString3 += ('&lt;td&gt;' + obj2[key3][index] + '&lt;/td&gt;');
    });
    bodyString3 += '&lt;/tr&gt;';
    headString3 += ('&lt;tr&gt;&lt;th colspan="' + obj2[key3].length + '"&gt;' + 'Suggested Fruits' + '&lt;/th&gt;&lt;/tr&gt;');
    $('.randomclass tbody').html(bodyString3);
    $('.randomclass thead').html(headString3);
  }
  
  function redraw_after(obj3) {
    var bodyString3 = '&lt;tr&gt;';
    var headString3 = '';
    $.each(obj2[key3], function(index) {
      if (index % 5 == 0 &amp;&amp; index &gt; 0) {
        bodyString3 += ('&lt;/tr&gt;&lt;tr&gt;');
      }
      bodyString3 += ('&lt;td&gt;' + obj2[key3][index] + '&lt;/td&gt;');
    });
    bodyString3 += '&lt;/tr&gt;';
    headString3 += ('&lt;tr&gt;&lt;th colspan="' + obj2[key3].length + '"&gt;' + 'Suggested Fruits' + '&lt;/th&gt;&lt;/tr&gt;');
    $('.randomclass tbody').html(bodyString3);
    $('.randomclass thead').html(headString3);
  }
  
  
  
  function listener(obj3) {
    $(document).ready(function() {
      $(document).on("click", "#randomid td", function() {
        data = this.innerHTML;
        k1 = Object.keys(obj2).find(k =&gt; obj2[k].indexOf(data) &gt;= 0)
        index = obj2[k1].indexOf(data);
        obj2[k1].splice(index, 1);
        obj3[key2].push(data);
        var element = $(this).detach();
        $('#greenid &gt; tbody').append('&lt;tr&gt;&lt;td class="new-green-fruit"&gt;' + element.html() + '&lt;/td&gt;&lt;/tr&gt;');
        redraw_after();
      });
    });
  
    $(document).ready(function() {
      $('body').on('click', 'td.new-green-fruit', function() {
        data2 = this.innerHTML;
        k2 = Object.keys(obj3).find(k =&gt; obj3[k].indexOf(data2) &gt;= 0)
        index2 = obj3[k2].indexOf(data2);
        obj3[k2].splice(index2, 1);
        obj2[key3].push(data2);
        $(this).parent().detach();
        var element2 = $(this).detach();
        $('#randomid &gt; tbody').append('&lt;td&gt;' + element2.html() + '&lt;/td&gt;');
        redraw_after(obj3);
      });
    });
  }
  redraw(obj3);
  listener(obj3);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.class {
    font-family: Open Sans;
  }
  
  .center {
    display: flex;
    justify-content: center
  }
  
  table.pillstable {
    float: left;
    width: 70% 
    table-row: fixed;
  }
  
  div {
    margin-bottom: 50px;
  }
  
  .new-green-fruit {
    padding: 8px 15px;
    text-align: center;
    font-size: 15px;
    border-radius: 25px;
    background-color: #2196f3;
    color: white;
    cursor: pointer;
  }
  
  table.pilltable td {
    padding: 8px 15px;
    text-align: center;
    font-size: 15px;
    border-radius: 25px;
    background-color: #2196f3;
    color: white;
    cursor: pointer;
  }
  
  table.pilltable th {
    font-weight: normal;
    border: 0;
    padding: 10px 0;
  }
  
  .greenpilltable {
    padding: 8px 15px;
    text-align: center;
    font-size: 15px;
    border-radius: 25px;
    background-color: #4caf50;
    color: white;
    cursor: pointer;
  }
  
  table.greenheader th {
    font-weight: normal;
    border: 0;
    padding: 10px 0;
  }
  
  table.redpilltable td {
    padding: 8px 15px;
    text-align: center;
    font-size: 15px;
    border-radius: 25px;
    background-color: #ff9800;
    color: white;
    cursor: pointer;
  }
  
  table.redpilltable th {
    font-weight: normal;
    border: 0;
    padding: 10px 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;html&gt;
  
    &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;link rel="shortcut icon" href="//#" /&gt;
  
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;div class="center"&gt;
        &lt;table cellspacing="5" id="redid" cellspacing="5" class="redclass redpilltable class"&gt;
          &lt;thead&gt;&lt;/thead&gt;
          &lt;tbody&gt;&lt;/tbody&gt;
        &lt;/table&gt;
  
        &lt;table cellspacing="5" id="greenid" cellspacing="5" class="greenclass greenheader class"&gt;
          &lt;thead&gt;&lt;/thead&gt;
          &lt;tbody&gt;&lt;/tbody&gt;
        &lt;/table&gt;
      &lt;/div&gt;
  
      &lt;div class="center"&gt;
        &lt;table cellspacing="5" id="randomid" cellspacing="5" class="randomclass pilltable class"&gt;
          &lt;thead&gt;&lt;/thead&gt;
          &lt;tbody&gt;&lt;/tbody&gt;
        &lt;/table&gt;
      &lt;/div&gt;
  
    &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>