JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border=1 id='battery'>
  <tr>
    <th>RowName</th>
    <th>ColName1</th>
    <th>ColName2</th>
  </tr>
  <tr>
    <td id='name'>
      My Name 1
    </td>
    <td id='col1'>test row 1 col 1</td>
    <td id='col2'>test row 1 col 2</td>
  </tr>
  <tr>
    <td id='name'>
      My Name 2
    </td>
    <td id='col1'>test row 2 col 1</td>
    <td id='col2'>test row 2 col 2</td>
  </tr>
</table>

JavaScript

$(document).ready(function() {
    var TemplateData = {
      templateName: 'Template 123',
      tableInfo: [{
        Name: '',
        rowDetails: [

        ]
      }]
    }

    $('#battery tr').each(function(i, row) {
      var rowsName = $(this).find('#name').text();
      var col1 = $(this).find('#col1').text();
      var col2 = $(this).find('#col2').text();

      TemplateData.tableInfo[0].rowDetails.push({
        rowName: "name",
        value: rowsName
      })

      TemplateData.tableInfo[0].rowDetails.push({
        rowName: "col1",
        value: col1
      })

      TemplateData.tableInfo[0].rowDetails.push({
        rowName: "col2",
        value: col2
      })
    });

    console.log(TemplateData);
  });