JSFiddle - React, Tailwind, and code Playground

by spadez

HTML

<h1>Questions</h1>

<p>Add additional questions. You can select how long you would like the reply to be and if they are required to answer it.</p>
<div>
    <input value="Why do you want this">
    <select>
        <option value="single">Single line reply</option>
        <option value="multi">Paragraph reply</option>
    </select>
    <select>
        <option value="single">Required</option>
        <option value="multi">Optional</option>
    </select>
    <button class="removeclass">Delete</button>
</div>
<div id="InputsWrapper"></div>
<button id="addfield">Add question</button>

JavaScript

var MaxInputs = 3; //maximum input boxes allowed
var InputsWrapper = $("#InputsWrapper"); //Input boxes wrapper ID
var AddButton = $("#addfield"); //Add button ID

var x = InputsWrapper.length; //initlal text box count
var FieldCount = 1; //to keep track of text box added

$(AddButton).click(function (e) //on add input button click
{
    if (x < MaxInputs) //max input box allowed
    {
        FieldCount++; //text box added increment
        //add input box
        $('<div><input type="text" name="mytext[]" id="field_' + FieldCount + '" value="Text ' + FieldCount + '"/>    <select>
        <option value="single">Single line reply</option>
        <option value="multi">Paragraph reply</option>
    </select>
    <select>
        <option value="single">Required</option>
        <option value="multi">Optional</option>
    </select><button class="removeclass">Delete</button></div>').insertBefore(InputsWrapper);
        x++; //text box increment
    } else {
        alert("Question limit reached");
    }
    return false;
});

$("body").on("click", ".removeclass", function (e) { //user click on remove text
    $(this).parent('div').remove(); //remove text box
    x--; //decrement textbox
    return false;
})