<table id="tableData">
    <thead>
        <tr class="tableheader" >
            <th>NODE ID</th>
            <th>VENDOR</th>
            <th>PRODUCT ID</th>
            <th>PRODUCT TYPE</th>
            <th>HOME ID</th>
            <th>SECURE</th>
        </tr>
    </thead>
    <tbody id="tableBody">
    </tbody>
</table>

<div id="endDiv" style="display: none">
    <ol class="rounded-list">
        <li><label>ID: <input id="roomName"/></label></li>
        <li><label>LOC. NAME: <input id="loc"/></label></li>
        <li><label>EPID: <span id="epid"></span></label></li>
        <li><label>CLSLIST: <span id="clslist"></span></label></li>
        <li><label>TYPE: <span id="type"></span></label></li>
        <li><label>ZPLUS: <span id="zplus"></span></label></li>
        <button onclick="submitData();">Submit changes</button>
    </ol>
</div>

$("tr.breakrow").click(function(test) {
  $(this).nextUntil('tr.breakrow').slideToggle(100);
  $("#endDiv").contents().appendTo(".breakrow");

  getEndpoints( $(test.currentTarget).find(".nodeid")[0].innerHTML);
}); //getEndpoints function populate the div with specific values