JSFiddle - React, Tailwind, and code Playground

by alr3

HTML

<style>
    .dontshow { display: none }
</style>
<div id="riders-div">
    <div class="rider-new">Rider New</div>
</div>
<fieldset>
    <legend>Message</legend>
    <div id="rider-message"></div>
</fieldset>
<div>
    <a id="removeButton">Remove</a>
    <a id="addButton">Add</a>
    
</div>

JavaScript

$(function(){
    var template = $('#riders-div .rider-new:first').clone(),
        ridersCount = 0;

    var addRider = function(){
        ridersCount++;
        var rider = template.clone().removeClass("dontshow").find(':input').each(function(){
            var newId = this.id.replace('-', 's['+ ridersCount + '][') + ']';
            $(this).prev().attr('for', newId); // update label for (assume prev sib is label)
            this.name = this.id = newId; // update id and name (assume the same)
        }).end() // back to .rider
        .appendTo('#rider-exist'); // add to container
        $('#rider-message').html('').removeClass("ui-state-highlight").removeClass("ui-state-error");
    };

    $('#addButton').click(addRider()); // attach event

$("#removeButton").click(function () {
  $('#riders-div .rider-new:last').remove();
$('#rider-message').html('').removeClass("ui-state-highlight").removeClass("ui-state-error");
     });
});