Code Preview

function buzzIt(valueOne, valueTwo) {
    for (i = 1; i <= 100; i++) {
        let fizz = false;
        let buzz = false;

        if (i % valueOne == 0) {
            fizz = true;
        }
        if (i % valueTwo == 0) {
            buzz = true;
        }

        //the tagIt function tags the corresponding element in the UI with Fizz, Buzz, or FizzBuzz.
        tagIt(i, [fizz, buzz])

    }
}

<!-- Page Content -->
<div class="content content-centered">
    <div class="container" id="content-container">
        <div class="row text-center animate__animated animate__fadeIn animate__delay-1s">
            <div class="col">
                <h1>FizzBuzz</h1>
                <p>If Value 1 is a multiple, it'll be tagged "Fizz" and Value 2 "Buzz". Where both are a multiple, it's a "FizzBuzz"!</p>
            </div>
        </div>
        <div class="row">
            <div class="col bottom-buffer animate__animated animate__fadeIn animate__delay-1s">
                <input type="text" value="" id="input-value-one" class="input-string" placeholder="Value 1 (Fizz)" />
            </div>
            <div class="col bottom-buffer animate__animated animate__fadeIn animate__delay-1s">
                <input type="text" value="" id="input-value-two" class="input-string" placeholder="Value 2 (Buzz)" />
            </div>
        </div>
        <div class="row text-center animate__animated animate__backInUp">
            <div class="col">
                <table class="table table-responsive-lg table-striped table-dark">
                    <tbody id="generate-grid">
                        <!-- JavaScript generated grid -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

#buzz-it-button{
    width: 100%;
}

.fizz, .buzz, .fizzbuzz {
    font-weight: bold;
    color: #fcd088;
}