Dynamic jQuery input refreshes the page because of error

Question

I am making this input form through which users can add names of members in a team. I have four sets of input text fields. Initially, I let one of them be visible, and make the other three have hidden displays. Through javascript, I want the user to see a new set of these inputs by pressing the add member button. This works perfectly on my localhost. However, when I deploy it, the page reloads/refreshes itself whenever I press the add button. And in the console, it gives this error The source list for Content Security Policy directive 'script-src' contains an invalid source: ''strict-dynamic''. It will be ignored.

function add(){
    if($('#total_chq').val() < 4){
        var index = parseInt($('#total_chq').val()) + 1;
        $('#member_' + index).show();
        $('#total_chq').val(index);
    }
}
function remove(){
    var last_no = $('#total_chq').val();
    if(last_no > 1){
        $('#member_' + last_no).hide();
        $('#total_chq').val(last_no - 1);
    }
}

<div id="member_container">
    <!-- first guy -->
    <div class="form-field">
        <div class="form-group">
            <label for="fname">First Name</label> <input type="text"
                name="firstname1" class="form-control">
        </div>
        <div class="form-group">
            <label for="lname">Last Name</label> <input type="text"
                name="lastname1" class="form-control">
        </div>
    </div>
    <!-- second guy -->
    <div class="form-field" style="display: none;" id="member_2">
        <div class="form-group">
            <label for="fname">First Name</label> <input type="text"
                name="firstname1" class="form-control">
        </div>
        <div class="form-group">
            <label for="lname">Last Name</label> <input type="text"
                name="lastname1" class="form-control">
        </div>
    </div>
    <!-- third guy -->
    <div class="form-field" style="display: none" id="member_3">
        <div class="form-group">
            <label for="fname">First Name</label> <input type="text"
                name="firstname1" class="form-control">
        </div>
        <div class="form-group">
            <label for="lname">Last Name</label> <input type="text"
                name="lastname1" class="form-control">
        </div>
    </div>
    <!-- fourth guy -->
    <div class="form-field" style="display: none;" id="member_4">
        <div class="form-group">
            <label for="fname">First Name</label> <input type="text"
                name="firstname1" class="form-control">
        </div>
        <div class="form-group">
            <label for="lname">Last Name</label> <input type="text"
                name="lastname1" class="form-control">
        </div>
    </div>
</div>
<input type="hidden" value="1" id="total_chq">
<button class="btn btn-outline-none" onclick="add()">
    <i class="fas fa-plus"></i> Add Member
</button>
<button class="btn btn-outline-none" onclick="remove()">
    <i class="fas fa-times"></i> Remove Member
</button>

Answer 1

A couple of things might help. First make sure to use the type attribute and make sure to set it as button. As w3schools suggests:

Always specify the type attribute for the element. Different browsers may use different default types for the element.

If that doesn't do the trick, use event.preventDefault() in your add function. First add the event to the inline part:

<button onclick="add(event);" type="button">

Then adjust the first two lines of the add function, like so:

function add(event){
    event.preventDefault();