I have a webform which I am trying to allow the end user to be able to press an "ADD" button to increase the amount of "Serial Number" fields on a Warranty Registration Form submission page. It works flawlessly minus some missing CSS when testing the webform out using a website like https://jsfiddle.net however when I pack my theme together and upload it to my BigCommerce website, the ADD button does nothing and there are no errors in the console.

Here is the Javascript for the form to duplicate the field:

$('.add').on('click', add);
$('.remove').on('click', remove);

function add() {
    var new_chq_no = parseInt($('#total_chq').val()) + 1;
    var new_input = "<input type='text' id='new_" + new_chq_no + "'>";

    $('#new_chq').append(new_input);

    $('#total_chq').val(new_chq_no);
}

function remove() {
    var last_chq_no = $('#total_chq').val();

    if (last_chq_no > 1) {
        $('#new_' + last_chq_no).remove();
        $('#total_chq').val(last_chq_no - 1);
    }
}

And here's a pastebin of the html for the form https://pastebin.com/4WqjHccE