JSFiddle - React, Tailwind, and code Playground

by andyjh07

HTML

<form class="full-width" id="referees">
    <label>Referee </label><input type="text" name="referee-1"></br>
</form>
<button id="addReferees">Add Referee</button>

JavaScript

// Declare where to start from with the auto increment number
var number = 1;

// <Magic>
$('#addReferees').on('click', function (e) {
    
    e.preventDefault();
    
    // Increment the number var value so it's auto incrementing
    number++;
    
    // Append extra fields with auto incrementing number
    $('<label>Referee </label><input type="text" name="referee-'+ number +'"></br>').fadeIn(500).appendTo('#referees');
});
// </Magic>