JSFiddle - React, Tailwind, and code Playground

by kneidels

HTML

<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
 <div class="row">
          <div class="col-md-4">
              
        <div class="form-group alert alert-heading alert-info">
            <label for="childcount">How many children will you be ordering for?</label>
            
     <select name="childcount" id="childcount" class="required form-control"> 
         <option value="">Select...</option>
         
             <option value="1" >1</option>
             
        
             <option value="2" >2</option>
             
        
             <option value="3" >3</option>
             
        
             <option value="4" >4</option>
             
        
             <option value="5" >5</option>
             
        
     </select>
      </div>    </div>      </div>  
      <div id="basehtml" style="display: none;">
              <div class="row kidrow" data-row="~" >
     
     <div class="col-xs-12">
        <span class="label label-info" style="font-size: 1.1rem;"> Child #<span class="rownumber" data-row="~">~</span></span>
     </div>
     <div class="col-xs-12 col-md-4"><div class="form-group">
            <label for="StudentGrade~">Grade</label>
            <!--<input type="text" name="StudentGrade1" id="StudentGrade" class="form-control required" title=" " value="">-->
		  <select  name="StudentGrade~" id="StudentGrade~" class="form-control required gradeoption"  data-row="~" title=" " >
			  	<option value="" >Select...</option>
              
                <option value="N" >N</option>
                <option value="K" >K</option>
                <option value="1" >1</option>
                <option value="2" >2</option>
                <option value="3" >3</option>
                <option value="4" >4</option>
          ...

CSS

#kidrowarea { border: 1px solid #333; padding: 5px;}

JavaScript

$(document).ready(function(){
 
 
    $("#kidrowarea").on("change", ".gradeoption", function(){
        var rowid = $(this).data("row");
        var gradeoption = $(this).val();
        
        
        $("select[name=placeholder][data-row="+rowid+"]").hide();
        $(".planselector[data-row="+rowid+"]").show();
        
        // just in case a selection was previously made - lets reset the plan drop down:
        $(".planselector[data-row="+rowid+"]").val('');
        
        if (gradeoption=='N' || gradeoption =='K') {
            
            //3,6 : hide 
            $(".planselector[data-row="+rowid+"] optgroup[data-groupid=3], .planselector[data-row="+rowid+"] optgroup[data-groupid=6]").hide();
            //2,4 : show
            $(".planselector[data-row="+rowid+"] optgroup[data-groupid=2], .planselector[data-row="+rowid+"] optgroup[data-groupid=4]").show();
            
        } else {
            //3,6 : show 
            $(".planselector[data-row="+rowid+"] optgroup[data-groupid=3], .planselector[data-row="+rowid+"] optgroup[data-groupid=6]").show();
            //2,4 : hide
            $(".planselector[data-row="+rowid+"] optgroup[data-groupid=2], .planselector[data-row="+rowid+"] optgroup[data-groupid=4]").hide();
        }

    });
      
	 
   
   $("#childcount").change(function(){
         var childcount = $("#childcount").val();
         var existingKidBlockCount = $("#kidrowarea .kidrow").length;
             
         var basehtml = $("#basehtml").html();
         var currenthtml = '';
                                      
            $("#kidrowarea").html('');
            for ( let kk = 1; kk <= childcount; kk++){
                 currenthtml = basehtml;
                 currenthtml = currenthtml.replace(/~/g,kk)
                 $("#kidrowarea").append( currenthtml );
                
                // $("#kidrowarea .kidrow")
            }
         
         // now we need to go through the kidrow and rename fields:
         
     ...