Unwanted commas while I am trying to pass HTML code and some variables

Question

I am working on a Photoshop CEP extension and I am using jquery-confirm for my alerts. My problem is that I get some unwanted commas while I am trying to pass an HTML table and some variables to a jquery-confirm alert!!! Here is the code which is responsible for this part...

function list_FoundLayers() {
  try {
    // Checks if should get layers data by layer name and HEX color or not.
    let layersData;
    if (htmlElements.content.specificNameTxtbox.value === "") {
      layersData = filter_layersData(false)
    } else {
      layersData = filter_layersData(true)
    };

    // Creates a table row for each layer.
    let tableRows = [];
    for (let i in layersData) {
      let hasEffect;
      if (layersData[i][3] === 'true') {
        hasEffect = '<i class="fas fa-check"></i>'
      } else {
        hasEffect = '<i class="fas fa-times"></i>'
      };
      let isVisible;
      if (layersData[i][4] === 'true') {
        isVisible = '<i class="fas fa-check"></i>'
      } else {
        isVisible = '<i class="fas fa-times"></i>'
      };
      let tableRow = `<tr id="jc-table-layer-data-${i}" layerID="${layersData[i][1]}" class="inner-row">
                                <td>${layersData[i][1]}</td>
                                <td>${layersData[i][5]}</td>
                                <td>${layersData[i][0]}</td>
                                <td>${hasEffect}</td>
                                <td>${isVisible}</td>
                            </tr>`;
      tableRows.push(tableRow);
    };

    // Creates the whole HTML table.
    let htmlCode = `<table class="jc-table" id="jc-table"><thead><tr><th>ID</th><th>Type</th><th>Name</th><th>FX</th><th>Visible</th></tr><tfoot><tr><td colspan="5">Found <b>${tableRows.length}</b> layers in total.</td></tr></tfoot><tbody>${tableRows}</tbody></table>`

    // Gives result using a jquery-confirm.
    commonAlert(
      'blue',
      null,
      'Found Layers',
      htmlCode,
      function() {
        manipulateHTMLElements('disable')
      },
      function() {
        for (let i in layersData) {
          const $thisElement = $(`#jc-table-layer-data-${i}`);
          const $thisElementBackgroundColor = $($thisElement).css('backgroundColor');

          // Select specific layer when user click on it.
          $($thisElement).click(
            function() {
              $(this).css('background', 'rgba(0,0,0,0.5)');
              selectById($(this).attr("layerID"))
            }
          )
          // When user click anywhere else.
          $(document).mouseup(
            function(element) {
              if (!$thisElement.is(element.target) && $thisElement.has(element.target).length === 0) {
                $($thisElement).css('background', $thisElementBackgroundColor)
              }
            }
          )
        };
      },
      function() {
        this.close()
      },
      function() {
        manipulateHTMLElements('enable')
      }
    );
  } catch (err) {
    catchJSErrorAlert(getStack(err.stack, 'fullStuck'), getStack(err.stack, 'fnName'), getStack(err.stack, 'fileName'), getStack(err.stack, 'lnNum'), getStack(err.stack, 'colNum'), err.name, err.message);
  };
};

And here is an image of the issue.

Answer 1

As noticed by Zydna, you need to make a string out of your tableRows...

<tbody>${tableRows.join('\n')}</tbody> //\n not necessary but help to debug...

also I think you forgot to close the <thead> tag in your html line.