JSFiddle - React, Tailwind, and code Playground

by KJ

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="body-content">
    <form class="form-inline">

        <div class="panel panel-default">

            <div class="panel panel-heading">
                Yii2 Form Clone Html                
                <a href="#" class="add btn btn-sm btn-success pull-right">Add</a>                
            </div>

            <div class="panel panel-body">

                <div class="form-section">

                    <div class="row" style="margin-top: 20px;">
                        <div class="col-md-3">
                            <div class="form-group">                
                                <input type="text" class="name form-control" placeholder="Username" id="name" name="username[]">                                
                                <span class="error"></span>
                            </div>
                        </div>

                        <div class="col-md-2">
                            <div class="form-group">                
                                <select name="city[]" class="form-control" class="city" id="city">
                                    <option value="">Select City</option>
                                    <option value="Pune">Pune</option>
                                    <option value="Mumbai">Mumbai</option>                        
                                </select>                                
                                <span class="error"></span>
                            </div>
                        </div>

                        <div class="col-md-2">
                            <div class="form-group">
                                <label class="checkbox-inline">
                                    <input type="checkbox" class="edu" value="MBA" name="edu[0]"...

CSS

.error{
        font-size:12px;
        color:red;
        font-weight: bold;
        display: block;
    }

JavaScript

//Create a variable "clonedTemplate" 
    var clonedTemplate = $(".form-section .row:first").clone();
    var removeLink = "<div class='col-md-1'><div class='form-group pull-right'><a href='#' class='btn btn-sm btn-danger delete'>x</a></div></div>";
    var index = 0;
    var bodyObj = $('body');

    $(document).ready(function () {
        bodyObj.on('click', '.add', function () {
            clone();
        });
        bodyObj.on("click", ".delete", function () {
            $(this).closest(".row").remove();
        });
        bodyObj.on("click", ".submit", function (e) {
            validateForm(e);
        });
    });

    function clone() {
        index++;
        var formSection = clonedTemplate.clone().find(':input').each(function () {
            var oldId = $(this).attr('id'); // getting "id" attribute
            var newId = oldId + "_" + index;  // generating new id
            $(this).attr('id', newId); // updating "id" field

            if ($(this).attr('type') === "radio") {
                var prefix = "gender[" + index + "]";
                $(this).attr('name', prefix); // updating "name" field
            }

            if ($(this).attr('type') === "checkbox") {
                var prefix = "edu[" + index + "]";
                $(this).attr('name', prefix); // updating "name" field
            }

        });
        formSection.end().appendTo('.form-section');
        $(".form-section .row:last").append(removeLink);
    }

    function validateForm(e) {
        var errorCount = 0;
        $(".form-section").find(":input").each(function () {
            var type = this.type;
            //console.log(type);
            var errorTag = $(this).closest('.form-group').find('.error');
            var val = $(this).val();
            //console.log(val);
            switch (type)
            {
                case "text":
                    if (val === "") {
                        errorCount = 1;
                        errorTag.html("Username...