JSFiddle - React, Tailwind, and code Playground

by Emerson Marini

HTML

<input type="button" data-role="image" data-id="32" id="addButton" value="+" class="tiny button radius">
<div id="TextBoxesGroup"></div>

CSS

label input[type="file"] {
    position: fixed;
    top: -1000px;
}
button, .button {
    background-color: #fbb428;
    border-color: #e59904;
    border-style: solid;
    border-width: 0;
    color: #0e92a1;
    cursor: pointer;
    display: inline-block;
    font-family:"museo-sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
    font-size: 1rem;
    font-weight: 300;
    line-height: normal;
    margin: 0 0 1.25rem;
    padding: 0.625rem 1.25rem 0.6875rem;
    position: relative;
    text-align: center;
    text-decoration: none;
    transition: background-color 300ms ease-out 0s;
}
.question_row .columns {
    background: none repeat scroll 0 0 #0b7582;
    border-radius: 6px;
    margin-bottom: 1rem;
    margin-top: 1rem;
    padding-bottom: 1rem;
    padding-top: 0.5rem;
}
.question_row .columns:before {
    border-color: #0b7582 transparent transparent;
    border-style: solid;
    border-width: 15px 5px 0;
    bottom: -7px;
    content:"";
    display: none;
    height: 0;
    left: -6px;
    position: absolute;
    width: 0;
}
.column, .columns {
    float: left;
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
    position: relative;
}
.large-3 {
    width: 25%;
}

JavaScript

var counter = 1;

$(document).on("click", "#addButton", function () {
    var datacounter = $('#TextBoxesGroup .textboxdiv_new:last-child').attr('data-id');

    if (typeof (datacounter) != 'undefined') {
        counter = parseInt(datacounter, 10) + 1;
    } else {
        counter = 1;
    }

    var quid = $(this).attr("data-id");
    var datarole = $(this).attr("data-role");

    if (counter > 10) {
        alert("Only 10 textboxes allowed");

        return false;
    }

    var newTextBoxDiv = $(document.createElement('div')).attr({
        'id': 'TextBoxDiv' + counter,
        'data-id': counter,
        'class': 'textboxdiv_new'
    });

    if (datarole == "image") {
        newTextBoxDiv.after().html('<div class="row"><div class="large-3 columns left button-mar-top-btm"><label class="tiny button radius multipleimg"><input type="file" name="ques_' + quid + '[]' + '" id="ques_' + quid + '[]' + '" value="" class="imgupload" data-id=' + counter + '>Upload Photo</label> </div><div class="large-7 left columns button-mar-top-btm"><input class="file-upload-input" type="text" id="filename' + counter + '"></div><div class="large-2 left columns button-mar-top-btm"><a href="#" class="button radius tiny alert removeField" >&#215;</a></div></div>');
    } else {
        newTextBoxDiv.after('').html('<div class="row"><div class="large-10 columns"><input type="text" name="ques_' + quid + '[]' +
            '" id="ques_' + quid + '[]' + '" value="" ></div><div class="large-2 columns left padding-top"><a href="#" class="button radius tiny alert removeField" >&#215;</a></div>');
    }

    newTextBoxDiv.appendTo("#TextBoxesGroup");
    counter++;
});

$(document).on("click", "a.removeField", function (event) {
    event.preventDefault();

    var newTextBoxDiv = $(document.createElement('div'));
    var previd = $("input#addButton").attr("data-id");
    var div = $(this).parent().parent().parent().remove();
    var datacounter = $('#TextBoxesGroup...