JSFiddle - React, Tailwind, and code Playground

by vijayP

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/additional-methods.min.js"></script>
<!--Contact information Help pop up Ends-->
<div class="em_pho cloned-row">
    <select id="sel_phntype" name="sel_phntype" class="sslt_Field">
        <option selected='selected' value="0">Please Select</option>
        <option value="BUSN">Business</option>
        <option value="CAMP">Campus</option>
        <option value="CELL" selected>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 txt_CC ipt_required" placeholder="Country Code" id="txt_CC" maxlength="3" name="txt_CC" /> 
										<input type="text" class="pn_field txt_Pno ipt_required" placeholder="Phone Number" id="txt_Pno" name="txt_Pno" />
										<input type="radio" class="preferred" checked 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_more phn_more" id=""/>
									 </span>

</div>

JavaScript

$(document).ready(function () {
	var count=0;
    $(document).on("click", ".btn_more", function () {
        var $clone = $('.cloned-row:eq(0)').clone(true, true);
        $clone.find('[id]').each(function () {
            this.id = this.id + (count) //change the id of each element by adding count to it
        });
        $clone.find('.btn_more').after("<input type='button' class='btn_less1 phn_del' id='buttonless" + count + "'/>")
        $clone.attr('id', "added" + (count)); //just append count here
        $clone.find('.preferred').attr('checked', false);
        $clone.find('.sslt_Field').val(0);
        $clone.find('.txt_CC').val('');
        $clone.find('.txt_Pno').val('');
        $(this).parents('.em_pho').after($clone);
        count++; //increment count at the end.
    });
    $('.cc_field').on('change', function (e) {
        var len = $(this).val().length;
        if (len == 1) {
            $(this).val('00' + $(this).val());
        } else if (len == 2) {
            $(this).val('0' + $(this).val());
        } else if (len == 3) {}
    });
    $(document).on('click', ".btn_less1", function () {
        var len = $('.cloned-row').length;
        var thisval = confirm("Delete current/selected rows from this page? The delete will occur when the transaction is saved.");
        if (thisval == true) {
            if (len > 1) {
                $(this).closest(".btn_less1").parents('.em_pho').remove();
            }
        } else {

        };
    });
});