JSFiddle - React, Tailwind, and code Playground

by ChrisStanyon

HTML

<div id="inputs">
    <div><input type="text" name="qty1" /><input type="text" name="name1" /></div>
</div>
<div id="buttons">
    <button id="plus">+</button>
    <button id="remove">-</button>
</div>

CSS

#inputs { float:left; }
#buttons { float:left; }
#remove { display:none; }

JavaScript

//The add button
$('#plus').click(function() {
    count = $('#inputs div').length + 1;
    newQty = $('<input>').attr({type : 'text', name: 'qty'+count});
    newName = $('<input>').attr({type : 'text', name: 'name'+count});
    newContent = $('<div>').append(newQty,newName);
    $('#inputs').append(newContent);    
    if ( count>1 ) { $('#remove').show(); }
});

//The remove button
$('#remove').click(function(){
    $("#inputs div:last-child").remove();
    if ( $('#inputs div').length == 1 ) { $('#remove').hide(); }
});