JSFiddle - React, Tailwind, and code Playground

by Norlihazmey Ghazali

HTML

<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
<h1>Hello</h1>
<div class="form-group" id="intro-box">
    <div>
        <input type="text" style="width:85%;float:left;margin-bottom:5px;" class="form-control inputBox" id="introlabelname0" name="introlabelname" placeholder="Label Name" value="">
        <input type="button" class="btn btn-success btn-sm" name="plus" id="plus" value="+" style="font-size:21px; line-height:12px; border-radius:4px; margin:3px; margin-bottom:6px;" onclick="addMore(1);">
    </div>
</div>

JavaScript

function addMore() {
    $("#plus").remove();
    $('#intro-box').append('<div><input type="text" style="width:85%;float:left; margin-bottom:5px;" class="form-control inputBox" name="introlabelname" placeholder="Label Name" value="">' +
        '<input type="button" onclick="" class="btn btn-danger btn-sm" name="minus" value="-" style="font-size:21px; line-height:12px; border-radius:4px; margin:3px; margin-bottom:6px;"></div>' +
        '<div> <input type="button" class="btn btn-success btn-sm" name="plus" id="plus" value="+" style="font-size:21px; line-height:12px; border-radius:4px; margin:3px; margin-bottom:6px;" onclick="addMore();"></div>');
    repopulate();
}

function removeThis(j) {
    $("#introlabelname" + j).remove();
    $("#minus" + j).remove();
    repopulate();
}


function repopulate() {
    $('.inputBox').each(function(i, e) {
        $(this).attr('id', 'introlabelname' + i);
        $(this).next().attr('onClick', function(old, n) {
            return 'removeThis(' + i + ')';
        });
        $(this).next().attr('id', function(old, n) {
            return 'minus' + i;
        });
    })
}