JSFiddle - React, Tailwind, and code Playground

HTML

<p> Site Attendees</p><br>
                
                <div class="container1">
                <button class="add_form_field">Add Attendee &nbsp; 
                <span style="font-size:16px; font-weight:bold;">+ </span>
                </button>
                <div><input type="text" name="personsundertakingworks" id="personsundertakingworks" placeholder="Name"></div>
                </div>

JavaScript

$(document).ready(function() {
    var max_fields = 10;
    var wrapper = $(".container1");
    var add_button = $(".add_form_field");

    var x = 1;
    $(add_button).click(function(e) {
        e.preventDefault();
        if (x < max_fields) {
            x++;
            $(wrapper).append('<div><input type="text" name="personsundertakingworks" id="personsundertakingworks" placeholder="Name"/><a href="#" class="delete">Delete</a></div>'); //add input box
        } else {
            alert('Maximum number of attendees reached')
        }
    });

    $(wrapper).on("click", ".delete", function(e) {
        e.preventDefault();
        $(this).parent('div').remove();
        x--;
    })
});