JSFiddle - React, Tailwind, and code Playground

by Mohamed Rias

HTML

<script src="ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script src="jquery-ui.min.js"></script>
<div id="main"><a style="float:right;" href="#" id="btAdd" value="" class="bt" />Invite more friends</a>
</div>
<div id="main"></div>
<input id="nextbutton" name="" type="submit" value="Next" />

CSS

.invalid input {
    background-color:#fee;
    border:1px solid red;
}
.invalid label {
    display:inline-block;
}
input {
    margin:5px;
    padding:2px;
    border:1px solid green;
}
label {
    display:none;
}

JavaScript

$(document).ready(function () {



    // CREATE A "DIV" ELEMENT AND DESIGN IT USING JQUERY ".css()" CLASS.
    var container = $(document.createElement('div')).css({
        padding: '5px',
        margin: '0'
    });

    // add several <div><input ...><label>...</label></div>
    for (i = 0; i < 4; i++) {
        $(container)
            .append('<div><input type="text" class="input" id="tb' + i + '" placeholder="Email" /></div>');
    }

    $('#main').before(container); // ADD THE DIV ELEMENTS TO THE "main" CONTAINER.
    var $inputs = $(".input");
    var myValues = localStorage.getItem("myValues") ? JSON.parse(localStorage.getItem("myValues")) : [];
    for (var i = 0; i < myValues.length; i++) {
        $inputs[i].value = myValues[i];
    }

    // Validate input on every keyup()-event
    $("#nextbutton").click(function () {
        var myValues = [],
            $inputs = $('.input');
        for (i = 0; i < $inputs.length; i++) validateEmail($inputs[i]);
        if ($('.invalid').length !== 0) return false;
        for (i = 0; i < $inputs.length; i++) {
            myValues.push($inputs[i].value)
        }
        localStorage.myValues = JSON.stringify(myValues);
    });

    var iCnt = 4;

    function isValidEmail(email) {
        var expr = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
        return expr.test(email);
    }

    function validateEmail(el) {
        if (!isValidEmail($(el).val())) {
            $(el).parent().addClass('invalid');
            return false;
        } else {
            $(el).parent().removeClass('invalid');
            return true;
        }
    }
    $('#btAdd').click(function () {
        if (iCnt <= 19) {

            iCnt = iCnt + 1;

            // ADD TEXTBOX.
            //////DID NOT ADD DIV AS PARENT. THAT WAS THE ISSUE
            $(container).append('<div><input type=text class="input" id=tb' + iCnt + '  placeholder="Email" /></div>');

           ...