JSFiddle - React, Tailwind, and code Playground
HTML
<fieldset id="typography">
<ul>
<li><label for="Poll Question">Header</label></li>
<li><input type="text" id="formheader" value="Header"></input></li>
<div class="scroll">
<li><label>Answers</label></li>
<li id="formanswer1" class="clonedInput"><input type="text" id="formanswer1" value="" /></li>
<li id="formanswer2" class="clonedInput"><input type="text" id="formanswer2" value="" /></li>
<li id="formanswer3" class="clonedInput"><input type="text" id="formanswer3" value="" /></li>
</div>
<li><input type="button" id="btnAdd" value="Add Answer" />
<input type="button" id="btnDel" value="Remove Answer" /></li>
</ul>
</fieldset>
CSS
div.scroll {
background-color:#00FFFF;
width:190px;
max-height:300px;
overflow:scroll;
}
JavaScript
$('#btnDel').attr('disabled','disabled');
$('#btnAdd').click(function() {
var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
var newNum = new Number(num + 1); // the numeric ID of the new input field being added
// create the new element via clone(), and manipulate it's ID using newNum value
var newElem = $('#formanswer' + num).clone().attr('id', 'formanswer' + newNum);
var guianswer = $('#guianswer'+num).clone().attr('id', 'guianswer' + newNum).html('Answer '+newNum);
// manipulate the name/id values of the input inside the new element
newElem.children(':first').attr('id', 'formanswer' + newNum).val('');
guianswer.children(':first').attr('id', 'guianswer' + newNum).attr('name', 'guianswer' + newNum);
// insert the new element after the last "duplicatable" input field
$('#formanswer' + num).after(newElem);
$('#guianswer' + num).after(guianswer);
// enable the "remove" button
$('#btnDel').attr('disabled','');
// business rule: you can only add 5 questions
if (newNum == 20)
$('#btnAdd').attr('disabled','disabled');
});
$('#btnDel').click(function() {
var num = $('.clonedInput').length;
$('#formanswer' + num).remove();
$('#guianswer'+num).remove();
// enable the "add" button
$('#btnAdd').attr('disabled','');
// if only one element remains, disable the "remove" button
if (num-1 == 1)
$('#btnDel').attr('disabled','disabled');
});