JSFiddle - React, Tailwind, and code Playground

HTML

<script src="bootstrap.min.css "></script>
 <div class="container-fluid cloned-row1">
<div class="row">
    <div class="col-xs-6 col-sm-3 col-md-4 col-lg-3">
        <label>School Name</label>
        <br/>
        <select class="slt_Field txt_schName" name="txt_schName[]">
            <option value="">Please Select</option>
            <option value="Emirates College of Technology- UAE">COL000001</option>
            <option value="Al Khawarizmi International College- UAE">COL000002</option>
            <option value="Syscoms College">COL000003</option>
            <option value="Abounajm Khanj Pre-Uni Center">COL000004</option>
            <option value="Advanced Placement">COL000005</option>
            <option value="Al Buraimi College (Uni Clge)">COL000006</option>
            <option value="Al-Ain Community College">COL000007</option>
            <option value="AMA Computer College">COL000008</option>
            <option value="Arab Academy for Bankg and Fin">COL000009</option>		
            <option value="ARABACDSCITECHMARTIMETRNS">COL000010</option>		
            <option value="Arapahoe Community College">COL000011</option>		        <option value="other">Other</option>
        </select>                                            
    </div>
    <div class="col-xs-6 col-sm-3 col-md-4 col-lg-3">
        <br>
            <input type="text" class="ipt_Field school_Name" name="school_Name[]" disabled/>
            </div>
        <div class="col-xs-6 col-sm-3 col-md-4 col-lg-3">
            <label><span class="text-error">*</span>High School Avg / CGPA</label>
            <br/>
            <input type="text" class="ipt_Field ipt_Havg" id="" name="ipt_Havg[]" />
        </div>
        <div class="col-xs-6 col-sm-3 col-md-4 col-lg-3">
            <label><span class="text-error">*</span>Grade Type @</label>
            <br/>
            <select class="slt_Field ipt_grd" name="ipt_grd[]">
                <option value="">Please Select</option>
               ...

JavaScript

var i=1;
		$(document).on("click", ".edu_add_button", function () { 
			var i=$('.cloned-row1').length;
			$(".cloned-row1:last").clone(true).insertAfter(".cloned-row1:last").attr({           
				'id': function(_, id) { return id + i },
				'name': function(_, name) { return name + i }
				}).end().find('[id]').val('').attr({ 'id': function(_, id) { return id + i }  
			}); 
			$(".cloned-row1:last").find(".school_Name").attr('disabled', true).val('');
            	if(i < $('.cloned-row1').length){
					$(this).closest(".edu_add_button").removeClass('btn_more edu_add_button').addClass('btn_less btn_less1');
				}	
			i++;
			return false; 
		});  

 	$(document).on('click', ".btn_less1", function (){
 	    var len = $('.cloned-row1').length;
 	    if(len>1){
			$(this).closest(".cloned-row1").remove();
		}
	});

    $(document).on('change', '.txt_schName', function (){
        var cur = $('.txt_schName').index($(this));
        $('.school_Name').eq(cur).val($(this).val())
        if ($(this).val() == "other") {
($(this)).parent().parent().find(".school_Name").prop('disabled', false);
             ($(this)).parent().parent().find(".school_Name").val('');
        }else{
             ($(this)).parent().parent().find(".school_Name").prop('disabled', true);

        }
	});
    
     $(document).on('change', '.txt_degreName', function (){
        var cur = $('.txt_degreName').index($(this));
        $('.degree_Description').eq(cur).val($(this).val())
         if ($(this).val() == "other") {
            $("#degree_Description").prop('disabled', false);
             $("#degree_Description").val('');
        }else{
            $("#degree_Description").prop('disabled', true);
        }
    });