JSFiddle - React, Tailwind, and code Playground

HTML

<center>

<table cellspacing="1" cellpadding="1" border="3" rules="all">
<tbody>
<tr>
    <td align="center">
        <table>
            <tbody>
            <tr>
                <td></td>
            </tr>
            </tbody>
        </table>
    </td>
    <td nowrap="1" align="center" colspan="12">
        <table>
            <tbody>
            <tr>
                <td nowrap="1" align="center"><font size="2" face="Arial" color="#000000">
                    Caption 1
                </font></td>
            </tr>
            </tbody>
        </table>
    </td>
    <td nowrap="1" align="center" colspan="12">
        <table>
            <tbody>
            <tr>
                <td nowrap="1" align="center"><font size="2" face="Arial">
                    Caption 2
                </font></td>
            </tr>
            </tbody>
        </table>
    </td>
    <td nowrap="1" align="center" colspan="12">
        <table>
            <tbody>
            <tr>
                <td nowrap="1" align="center"><font size="2" face="Arial">
                    Caption 3
                </font></td>
            </tr>
            </tbody>
        </table>
    </td>
    <td nowrap="1" align="center" colspan="12">
        <table>
            <tbody>
            <tr>
                <td nowrap="1" align="center"><font size="2" face="Arial">
                    Caption 4
                </font></td>
            </tr>
            </tbody>
        </table>
    </td>
    <td nowrap="1" align="center" colspan="12">
        <table>
            <tbody>
            <tr>
                <td nowrap="1" align="center"><font size="2" face="Arial">
                    Caption 5
                </font></td>
            </tr>
            </tbody>
        </table>
    </td>
</tr>
<tr>
    <td nowrap="1" align="center" rowspan="2">
        <table>
            <tbody>
            <tr>
                <td nowrap="1" align="center"><font size="2" face="Arial">
                    <b>1</b>
      ...

JavaScript

$(document).ready(function () {

      var data = createArray(5, 12);
      var INDEX = -1;
      $("table").find("tr:has(td[rowspan])").each(function (index, obj) {
          $(this).find("td[rowspan]").each(function (index, obj) {
              // DEBUG
              $(this).css('border', 'solid 1px red');
              if ($(this).attr("rowspan")) {
                  if (!$(this).attr("colspan")) {
                      INDEX++;
                  } else {
                      if ($(this).attr("rowspan") == 4) {
                          data[(index) - 1][INDEX] = $(this).text().trim();
                          data[(index) - 1][INDEX + 1] = $(this).text().trim();
                          
                          $(this).attr("data-info","Numbers: "+(INDEX+1)+", "+(INDEX+2)+"\n"+"caption: "+getCaption((index) - 1)+"\n"+"content: "+$(this).text().trim())
                      } else {
                          for (var i = 0; i < data.length; i++) {
                              if (data[i][INDEX] == null) {
                                  data[i][INDEX] = $(this).text().trim();
                         $(this).attr("data-info","Number: "+(INDEX+1)+"\n"+"caption: "+getCaption(i)+"\n"+"content: "+$(this).text().trim())
                                  break;
                              }
                          }
                      }
                      // DEBUG
                      console.log($(this).text().trim());
                  }
              }
          });
      });

      // DEBUG
      for (var i = 0; i < data.length; i++) {
          for (var z = 0; z < data[i].length; z++) {
              console.log(i + " " + z + " --> " + data[i][z]);
          }
      }
  });

   // ### DEBUG ###
  $('td[rowspan]').on('click', function () {
      var $this = $(this),
          num = $this.siblings(':first-child').text().trim(),
          pos = $this.index() + 1,
          name = $this.parent().siblings().first().children(':nth-child(' + pos +...