add() doesn’t get called by onClick

I’m trying to update the number of participants by increasing it by one every time the submit button gets clicked, and by doing so I added an add() inside my script tag and increased the participant number every time it gets clicked. But the number of participants doesn’t get changed for some reason.

Btw I’m new to DOM and JS

 <h5>Number of participant:<span id="submit">0</span></h5>
    <button type="button" onclick="add()">Submit</button>
</div>
<script>
    let Agenda_style = document.querySelector('.agenda'); //to add style  you must acess the class name/ID using querySelector
    Agenda_style.style.color = "red "; // set color to red to change the color of the class agenda
    let NewElement = document.createElement("li "); //create new element of type <li>
    NewElement.innerText = "Here "; // add a text inside the <li> element 
    Agenda_style.append(NewElement); // append a tet to the agendaa class

    let participant = 0;

    function add() {
        participant++;
        document.getElementById("submit").innerText = participant;
    };
</script>