Javascript Firefox checkbox issue

I have a web application that accesses a database to return a list of filenames for the user to select for download.

It used to be that this was just a confirmation of the files (and number/size of files) that would be downloaded based on the users filters. The users requested that this list have checkboxes so they could check/uncheck any files freely. Some of their filtered results produce more than 100k+ files. This was not an issue until checkboxes were added and some users reported that their browser was hanging while waiting for the result list.

It seems the issue lies with Firefox and checkboxes. Chrome and Edge return any list size immediately after the fetch. Firefox completes the fetch POST, then hangs. If I remove the checkboxes, Firefox has no issue.

I have investigated the issue to the string line below. Anyone know how Firefox deals with checkboxes and why this may be happening? Is there something wrong with that ?

function calculateResultsText() {
  let text = document.getElementById('resultsProductContent');
  text.innerHTML = '';
  let string ='';
  let id_num = 1;
  let x = 0
  filesize_total = 0
  while ( x < result_filenames.length) {
    string_filename = result_filenames[x]
    string_filesize = result_filenames[x+1]
    filesize_total = filesize_total + parseInt(string_filesize)
    if (string_filesize > 1000000){
        string_filesize = (string_filesize/1000000).toFixed(2) + "GB"
    }
    else if (string_filesize > 1000){
        string_filesize = (string_filesize/1000).toFixed(2) + "MB"
    }
    else {
        string_filesize = string_filesize + "KB"
    }
    string += `<div class="form-check"><label class="form-check-label" label id="form-check-id" for="check${id_num}"> <input type="checkbox" class="form-check-input" id="check${id_num}" name="vehicle${id_num}" checked=""> ${string_filename} &emsp; ${string_filesize} </label></div>`
    //string += `${string_filename} &emsp; ${string_filesize} <br>`
    id_num+=1
    x+=2
  }