JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<div id="formsBox">
        <form action="" method="post">
            <fieldset>
                <ul>
                    <li>
                        <label for="firstInput">First Input:</label>
                        <input type="text" name="firstInput" id="firstInput" />
                    </li>
                    <li>
                        <label for="secondInput">SecondInput:</label>
                        <input type="text" name="secondInput" id="secondInput" />
                    </li>
                </ul>
            </fieldset>
        </form>
    </div>
    <div id="formAdd">Add another form</div>

CSS

form {
    margin: 0 0 1em 0;
}
fieldset {
    border: 1px solid #ccc;
    padding: 0.5em;
    width: 90%;
    margin: 0 auto;
}
label {
    width: 6em;
    display: inline-block;
    text-align: right;
}
input {
    margin-left: 0.5em;
}

#formAdd {
    margin: 1em 0 0 0;
    padding: 0.5em 0 0 0;
    border-top: 2px solid #ccc;
    text-align: right;
    cursor: pointer;
}

JavaScript

$(document).ready(
        function(){
         $('#formAdd').click(
             function(){
                 var count = $('#formsBox form').length;
                 $('#formsBox form').eq(0).clone().appendTo('#formsBox').find('label, input').each(
                     function(){
                         if (this.id) {
                             var curId = this.id;
                             $(this).attr('id',curId + count);
                         }
                         else if ($(this).attr('for')) {
                             var curFor = $(this).attr('for');
                             $(this).attr('for', curFor + count);
                         }
                     }
                     );
             }
             );
        }
        );