JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans">
  <body>
    <table class="productTable ">
      <tbody>
        <tr>
          <td>
            1
          </td>
          <td>
            2
          </td>
        </tr>
        <tr>
          <td>
            1-1
          </td>
          <td>
            2-2
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

CSS

body {
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
}
#product-container { 
    background:#FAFAFA;
    border:1px solid #e4e4e4;
    margin:0; 
    padding:0;
}
div.product_item {
    border-bottom:1px dotted #CCC;
    padding:5px;
}
#product-container div:last-child { 
    border:0; 
}

JavaScript

$(".productTable").after("<div id='product-container'></div>");
$(".productTable tr:odd").appendTo("#product-container").each(function() {});
$('.productTable').remove();