JSFiddle - React, Tailwind, and code Playground

HTML

<input id="number" type="text" />
<button id="submitid">Submit</button>

<table id="datatable">
    <colgroup>
        <col>
            <col>
                <col>
                    <col>
                        <col>
                            <col>
                                <col>
                                    <col>
    </colgroup>
    <thead>
        <tr>
            <th rowspan="1" colspan="1">
                                  
                                      
                                        <input type="checkbox" class="select-all" id="circulation-item-id" title="Select All">
                                     
                                  </th>
                        <th rowspan="1" colspan="1">
                <div> <span><a href="#" title="">Format</a></span>

                </div>
            </th>
            <th rowspan="1" colspan="1">
                <div> <span><a href="#" title="">Title</a></span>

                </div>
            </th>
            <th rowspan="1" colspan="1">
                <div> <span><a href="#" title="">Number</a></span>

                </div>
            </th>
            <th rowspan="1" colspan="1">
                <div> <span><a href="#" title="">Code</a></span>

                </div>
            </th>
            <th rowspan="1" colspan="1">
                <div> <span><a href="#" title="">Checkout Date</a></span>

                </div>
            </th>
            <th rowspan="1" colspan="1">
                <div> <span><a href="#" title="">Due Date</a></span>

                </div>
            </th>
                <th rowspan="1" colspan="1">
                <div> <span><a href="#" title="">ItemId</a></span>

                </div>
            </th>
        </tr>
    </thead>
        <tbody>
            <tr><td><input type="checkbox" ></td><td>Book</td><td>Three Musketters</td><td>DE7598490587</td><td>7584092043857</td><td>03/18/13 11:17:51 AM</td><td>03/18/13 11:17:51...

JavaScript

// json data object
var data = JSON.parse('{ "122233334444": ["Book","Three Musketters","DE7598490587","7584092043857", "03/18/13 11:17:51 AM","03/18/13 11:17:51 AM", "1" ], "122223355552":["eBook","Fall Colors","XYZ29494949","7584092043857", "03/18/13 11:17:51 AM","03/18/13 11:17:51 AM", "2" ], "122223355533":["eBook","Snowfall","XYZ29494949","7584092043857", "03/18/13 11:17:51 AM","03/18/13 11:17:51 AM", "3" ] }');
$("#submitid").click(function () {
        $('#norecords-checkout').hide();
    var rowId = $("#number").val();
    var rowData = data[rowId];
    if (rowData) {
        
        var tr = $("<tr><td><input class='circulation-itemcheck' type='checkbox' checked/></td></tr>").attr("id", "datatable-row-" + rowId);
        for (var col = 0; col < rowData.length; col++)
        tr.append($("<td></td>").text(rowData[col]));
        $("#datatable").append(tr);
        $("#datatable").show();
    } else {
        alert("Row doesn't exist in json object: " + rowId);
    }
});