JSFiddle - React, Tailwind, and code Playground

by Rich Costello

HTML

<form action="#" method="post">
    <fieldset id="rows">
        <ul>
            <li>
                <input type="text" id="ans1" name="ans1" />
                <input type="text" id="ans2" name="ans2" />
            </li>
        </ul>
    </fieldset>
    <fieldset id="controls">
        <button id="addRow">add</button>
        <button id="removeRow" disabled>remove</button>
    </fieldset>
</form>

CSS

fieldset {
    width: 80%;
    border-radius: 1em;
    padding: 0.5em;
    border: 1px solid #ccc;
    margin: 0 auto 1em auto;
}
input {
    width: 40%;
    margin: 0.6em 4% 0.6em 4%;
}
button {
    width: auto;
}
button:first-child {
    float: right;
}

JavaScript

$(document).ready(
    function(){
        $('#addRow').click(
            function() {
                var curMaxInput = $('input:text').length;

                $('#rows li:first')
                    .clone()
                    .insertAfter($('#rows li:last'))
                    .find('input:text:eq(0)')
                    .attr({'id': 'ans' + (curMaxInput + 1),
                           'name': 'ans' + (curMaxInput + 1)
                          })
                    .parent()
                    .find('input:text:eq(1)')
                    .attr({
                        'id': 'ans' + (curMaxInput + 2),
                        'name': 'ans' + (curMaxInput + 2)
                    });
                $('#removeRow')
                    .removeAttr('disabled');
                if ($('#rows li').length >= 5) {
                    $('#addRow')
                        .attr('disabled',true);
                }
                return false;
            });
        
        $('#removeRow').click(
            function() {
                if ($('#rows li').length > 1) {
                    $('#rows li:last')
                        .remove();
                }
                if ($('#rows li').length <= 1) {
                    $('#removeRow')
                        .attr('disabled', true);
                }
                else if ($('#rows li').length < 5) {
                    $('#addRow')
                        .removeAttr('disabled');
                    
                }
                return false;
            });
    });