how to paginate using html and javascript dynamically

I am trying get my javascaript pagination right on pure html table. Despite the number of records I get back my pagination keeps showing me
one button.

<ul>
     <li class="nav-item">
        <a class="nav-link" id="addtocatalog-tab" data-toggle="tab" href="#addtocatalog" role="tab" aria-controls="account-details" aria-selected="false">Add Catalog</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="updateCatalog-tab" data-toggle="tab" href="#updateCatalog" onclick="InitiateTable()" role="tab" aria-controls="account-details" aria-selected="false">Update Catalog</a>
    </li>
 </ul>




function InitiateTable(id) {
         GetAllData();
      //})
 }




function GetAllData() {
     var orderData = [];
     const pageSize = 10;
     let curPage = 1;
     debugger
     $.ajax({
         url: "@Url.Action("GetallCat", "Home")",
         type: "Post",
     processData: false,
     contentType: false,
         success: function (result) {
             orderData = result.result;
             var tableData = "";
             console.log(result);
             console.log(orderData);
             orderData.filter((row, index) => {
                 let start = (curPage - 1) * pageSize;
                 let end = curPage * pageSize;
                 if (index >= start && index < end) return true;
             }).forEach(orderIndex => {
                 tableData += "<tr onClick ='getRow("+orderIndex.id +")'>";
                 tableData += `<td> ${parseFloat(orderIndex.id)} </td>`;
                 tableData += `<td> ${orderIndex.OEM}</td>`;
                 tableData += `<td> ${orderIndex.PCB} </td>`;
                 tableData += `<td> ${orderIndex.HFR} </td>`;
                 tableData += `<td> ${orderIndex.LUK}</td>`;
                 tableData += `<td> $${orderIndex.TractorModel}</td>`;
                 tableData += `<td> $${0}</td>`; "<tr>";
               /*  tableData += `<td> $${orderIndex.AvailableStock}</td>`;"<tr>";*/
                 //tableData += `<td> ${orderIndex.OEM}</td>`; "<tr>";
             });
             document.getElementById("data").innerHTML = tableData;

             var $table = document.getElementById("tblCatalogueUpdateList"),
                 // number of rows per page
                 $n = 10,
                 // number of rows of the table
                 $rowCount = $table.rows.length,
                 // get the first cell's tag name (in the first row)
                 $firstRow = $table.rows[0].firstElementChild.tagName,
                 // boolean var to check if table has a head row
                 $hasHead = ($firstRow === "TH"),
                 // an array to hold each row
                 $tr = [],
                 // loop counters, to start count from rows[1] (2nd row) if the first row has a head tag
                 $i, $ii, $j = ($hasHead) ? 1 : 0,
                 // holds the first row if it has a (<TH>) & nothing if (<TD>)
                 $th = ($hasHead ? $table.rows[(0)].outerHTML : "");
             // count the number of pages
             var $pageCount = Math.ceil($rowCount / $n);
             // if we had one page only, then we have nothing to do ..
             if ($pageCount > 1) {
                 // assign each row outHTML (tag name & innerHTML) to the array
                 for ($i = $j, $ii = 0; $i < $rowCount; $i++, $ii++)
                     $tr[$ii] = $table.rows[$i].outerHTML;
                 // create a div block to hold the buttons
                 $table.insertAdjacentHTML("afterend", "<div id='buttons'></div");
                 // the first sort, default page is the first one
                 sortDataRows(1, $th, $n, $tr, $table, $pageCount);
                 //function sortDataRows($p, $th, $n, $s)
             }
    

             // ($p) is the selected page number. it will be generated when a user clicks a button
             
         //}
       

     },
     error: function (er) {
         //code after Failure
     }

 });

 }



  function sortDataRows($p, $th, $n, $tr, $table, $pageCount) {
     /* create ($rows) a variable to hold the group of rows
     ** to be displayed on the selected page,
     ** ($s) the start point .. the first row in each page, Do The Math
     */
     var $rows = $th, $s = (($n * $p) - $n);
     for ($i = $s; $i < ($s + $n) && $i < $tr.length; $i++)
         $rows += $tr[$i];

     // now the table has a processed group of rows ..
     $table.innerHTML = $rows;
     // create the pagination buttons
     document.getElementById("buttons").innerHTML = pageButtons($p, $th, $n, $tr, $table,$pageCount);
     //sortDataRows(1, $th, $tn, $n, $s);
     // CSS Stuff
     document.getElementById("id" + $p).setAttribute("class", "active");
 }





 function pageButtons($pCount, $cur, $th, $tn, $n, $tr, $table, $pageCount) {
      /* this variables will disable the "Prev" button on 1st page
         and "next" button on the last one */
      var $prevDis = ($cur == 1) ? "disabled" : "",
          $nextDis = ($cur == $pCount) ? "disabled" : "",
          /* this ($buttons) will hold every single button needed
          ** it will creates each button and sets the onclick attribute
          ** to the "sort" function with a special ($p) number..
          */
          $buttons = "<input type='button' value='&lt;&lt; Prev' onclick='sortDataRows(" + ($cur - 1, $th, $n, $tr, $table, $pageCount) + ")' " + $prevDis + ">";
      for ($i = 1; $i <= $pCount; $i++)
          $buttons += "<input type='button' id='id" + $i + "'value='" + $i + "' onclick='sortDataRows(" +$i, $th, $n, $tr, $table, $pageCount + ")'>";
      $buttons += "<input type='button' value='Next &gt;&gt;' onclick='sortDataRows(" + ($cur + 1, $th, $n, $tr, $table, $pageCount) + ")' " + $nextDis + ">";
      return $buttons;
  }