Trying to get the HTML displayed to change every time a new button is clicked with jquery

let table = 6;
let i = 1;
$(function() {
    let $newOperatorButton = $('button');
       
    $newOperatorButton.on('click', function math(){
            let msgOperator = '';
            let expression;
            let operator = $(this).attr("value");
            if(operator === '+'){
                msgOperator = ' + ';
                expression = (table + i);
                while(i < 11){
                    msg += table + msgOperator + i + ' = ' + (table + i) + '<br />';
                    i++; 
                }
            } else if (operator === '-') {
                msgOperator = ' - ';
                expression = (table - i);
                while(i < 11){
                    msg += table + msgOperator + i + ' = ' + (table - i) + '<br />';
                    i++; 
                }

some code missing but it adds multiplication and division

            let el = document.getElementById('blackboard');
            el.innerHTML = msg;
        
        }
    );
});

This code is inside the body tag in my index.html

        <section id="page">
            <section id="blackboard"></section>
        </section>
        <form id="operator">
            <button name="add" type="button" value="+">+</button>
            <button name="subtract" type="button" value="-">-</button>
            <button name="multiply" type="button" value="x">x</button>
            <button name="division" type="button" value="/">/</button>
        </form>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="/index.js"></script>

I have it so it prints out a table with 10 numbers depending on the button clicked. For ex. table = 6 and i = 1 is 6+1=7.... 6+10=16