JSFiddle - React, Tailwind, and code Playground

HTML

<div id="cont">
<table id="tbl">
    <thead>
    <tr>
        <th>headcol1</th>
        <th>headcol2</th>
    </tr>
    </thead>
    <tr>
        <td>entry1A</td>
        <td>entry1B</td>
    </tr>
    <tr>
        <td>entry2A</td>
        <td>entry2B</td>
    </tr>
    <tr>
        <td>entry3A</td>
        <td>entry3B</td>
    </tr>
    <tr>
        <td>entry4A</td>
        <td>entry4B</td>
    </tr>
    <tr>
        <td>entry5A</td>
        <td>entry5B</td>
    </tr>
    <tr>
        <td>entry6A</td>
        <td>entry6B</td>
    </tr>
    <tr>
        <td>entry7A</td>
        <td>entry7B</td>
    </tr>
    <tr>
        <td>entry8A</td>
        <td>entry8B</td>
    </tr>
    <tr>
        <td>entry9A</td>
        <td>entry9B</td>
    </tr>
    <tr>
        <td>entry10A</td>
        <td>entry10B</td>
    </tr>
    <tr>
        <td>entry11A</td>
        <td>entry11B</td>
    </tr>
    <tr>
        <td>entry12A</td>
        <td>entry12B</td>
    </tr>
    <tr>
        <td>entry13A</td>
        <td>entry13B</td>
    </tr>
    <tr>
        <td>entry14A</td>
        <td>entry14B</td>
    </tr>
    <tr>
        <td>entry15A</td>
        <td>entry15B</td>
    </tr>
</table>    
</div>

CSS

#cont {

}

#tbl, #addedTable {
    float:left;
    margin-right: 50px;
}

JavaScript

var someDiv = document.getElementById("cont");
var someTable = document.getElementById("tbl");

var addedTable = document.createElement("table");
someDiv.appendChild(addedTable);

addedTable.setAttribute("id", "addedTable");
addedTable.innerHTML =  someTable.innerHTML;

var rows = someTable.getElementsByTagName("tr");
var rowsCopy = addedTable.getElementsByTagName("tr");

for(var i=1;i<rows.length;i++) //needs to be 1 instead of 0 to account for headers
{
    if(i>(rows.length/2))
    {
        rows[i].style.display = "none";
    }else
    {
        rowsCopy[i].style.display = "none";
    }
}