JSFiddle - React, Tailwind, and code Playground

by Mahadevan Sivasubramanian

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.js"></script>
<form autocomplete="off" class="basicForm" id="basicForm" method="POST" action="">
        <div class="container-fluid">
            <div class="row-fluid">
                 <div class="col-xs-12 col-sm-12 col-md-12 cnt">
                        <span id="error_message" class="error_msge">

                        </span>
                 </div>
            </div>
        </div>
<div class="em_pho cloned-row" id="phone_content">
	<select id="sel_phntype" name="sel_phntype" class="sslt_Field">
	    <option selected='selected' value="">Phone Type</option>
	    <option value="BUSN">Business</option>
	    <option value="CAMP">Campus</option>
	    <option value="CELL" >Cellphone</option>
	    <option value="CEL2">Cellphone2</option>
	    <option value="FAX">FAX</option>
	    <option value="HOME">Home</option>
	    <option value="OTR">Other</option>
	</select>
	<span class = "ph-inline">
	    <input type="text" class="cc_field" placeholder="Country Code" id="txt_CC" maxlength="3" name="txt_CC" /> 
	    <input type="text" class="pn_field" placeholder="Phone Number" id="txt_Pno" name="txt_Pno" />
	    <input type="radio" name="preferred" id="rad_Prf" value="preferred">
	    <label class="radio-label">Preferred</label>
	    <!--<button class="btn_more" id="buttonvalue"></button>/>-->
         <input type="button"  class=" btn-next" id="btn-Next" name="btn-Next" value = "next"/> 
	    <input type="button" class="phn_btn_more" id="buttonvalue" value = "add"/>
	</span>
</div>
    </form>

CSS

.error_message{
    background-color: lightcoral;
    color:white;
    border:1px solid red;
    text-align: center;
}
.errRed {
    color: black !important;
    border: 1px dotted #EA373D !important;
    padding: 6px !important;
}

JavaScript

var count=0;

$(document).on("click", ".phn_btn_more", function () { 
    var $clone = $('.cloned-row:eq(0)').clone();
    //alert("Clone number" + clone);
    $clone.find('[id]').each(function(){this.id+='someotherpart'});
    $clone.find('.phn_btn_more').after("<input type='button' class='btn_less1' id='buttonless' value = 'remove'/>")
    $clone.attr('id', "added"+(++count));
    $(this).parents('.em_pho').after($clone);
});

$(document).on('click', ".btn_less1", function (){
    var len = $('.cloned-row').length;
    if(len>1){	
        $(this).closest(".btn_less1").parents('.em_pho').remove();
    }
}); 
$("#basicForm").validate({
    onkeyup: false,
    showErrors: function (errorMap, errorList) {
        var errors = this.numberOfInvalids();

        if (errors) {
            var message = errors == 1 ? 'You missed 1 field. It has been highlighted' : 'You have missed ' + errors + ' fields. Please fill before submitted.';
            $("#error_message").html(message);
            $(".error_msge").show();
        } else {
            $(".error_msge").hide();
        }
        this.defaultShowErrors();
    },
    errorPlacement: function () {
        return false;
    },
    highlight: function (element) {

        if ($(element).is(':radio'))  {

        } else {
            $(element).addClass('errRed');
        }
        $(element).prevAll('label').find('span.required-star').addClass('text-error-red').removeClass('text-error-black');            
    },
    unhighlight: function (element) {

        if ($(element).is(':radio')) {
        } else {
            $(element).removeClass('errRed');
        }
        $(element).prevAll('label').find('span.required-star').addClass('text-error-black').removeClass('text-error-red');

    },

    rules: {
        txt_CC: "required",
        txt_Pno: "required"

    }
});