The Code

JavaScript

    //start or controller function(get the values from the page)
    function getValues() {
        //get the values from the page
        let fizzValue = document.getElementById("fizzValue").value;
        let buzzValue = document.getElementById("buzzValue").value;
        let limitValue = document.getElementById("limitValue").value;
    
        //parse into Integers
        fizzInt = parseInt(fizzValue);
        buzzInt = parseInt(buzzValue);
        limitInt = parseInt(limitValue);
    
        //validate that entries are integers
        if (
        Number.isInteger(fizzInt) &&
        Number.isInteger(buzzInt) &&
        Number.isInteger(limitInt)
        ) {
        //define numbers by calling fizzBuzz funtion
        fizzBuzz(fizzInt, buzzInt, limitInt);
        } else {
        alert("YOU MUST ENTER INTEGERS!");
        }
    }
    
    //build the array of results
    function fizzBuzz(fizzInt, buzzInt, limitInt) {
        //init the returnArray
        let returnArray = [];
    
        //loop from 1-li
        let li = limitInt;
        let fb = fizzInt * buzzInt;
        let i = 1;
        while (i <= li) {
        if (i % fb == 0) {
            returnArray.push(`FIZZ <i  style="color: #f7e900" class="fa-solid fa-bolt"></i> BUZZ`);
        } else if (i % buzzInt == 0) {
            returnArray.push(`<span  style="color: red">BUZZ</span>`);
        } else if (i % fizzInt == 0) {
            returnArray.push(`<span  style="color: royalblue">FIZZ</span>`);
        } else {
            returnArray.push(i);
        }
        i++;
        }
        //pass the array to the displayData function
        displayData(returnArray);
    }
    
    //dynamically display table, width based on buzzInt
    function displayData(fbArray) {
        //loop over the array create a tablerow for each item.
        let templateRows = "";
        for (let i = 0; i < fbArray.length; i++) {
        var z = "";
        //loop over the row defined by buzzInt
        for (let x = 0; x < buzzInt; x++) {
            z += `<td>${fbArray[i+x]}</td>`;
        }
        templateRows += `<tr>${z}</tr>`;
        i += buzzInt-1;
        }
        document.getElementById("results").innerHTML = templateRows;
    }
    
    //resets the table
    function resetTable() {
        let templateRows = "";
        document.getElementById("results").innerHTML = templateRows;
    }
    

This code displays without error thanks to: https://tohtml.com

An explanation:

The code is structured in 3 parts:

getValues()

getValues gets the user input from the page in the form of strings by utilizing getElementById to pull the values from the input fields.

Then we apply parseInt to the strings to get Integers to use for our purposes.

The if statement validates that both inputs were indeed Integers and only allows use to proceed if that is the case. Otherwise, we get an error message telling us to fix the input(s).
The Integers are passed to the fizzBuzz() function.

fizzBuzz()

fizzBuzz does what it says on the tin! It plays the game, assigning the Integers, 'FIZZ', 'BUZZ' & 'FIZZ-BUZZ' into their proper places in the array.
Then passes that array to the displayData() function.

displayData()

displayData displays the data. In this incarnation, the data table width is defined by the Buzz Value set on the page. The outer loop cycles over the array to define a row per iteration, while the inner loop cycles over a subset, the size of the Buzz Value, setting the values into their respective places in each row.

The code is completed once the table on the APP page is filled with rows from the string templateRows.

resetTable()

resetTable is called by the Reset button, and simply assigns an empty string to templateRows, thus giving the table nothing to display.