JSFiddle - React, Tailwind, and code Playground

HTML

<fieldset class="col_4" name="BetweenRange"> <legend>Range Comparison</legend> 
<form action="call_range.pl" method="post" id="range1" target="Range1">
 <table width="100%" border="1">
  <tr>
    <td><input name="r1_1stdate" type="text"  id="from1" required/><input name="r1_2nddate" type="text"  id="to1" required/></td> 
</form>
<form action="call_range.pl" method="post" id="range2" target="Range2">    
    <td><input name="r2_1stdate" type="text" id="from2" required/><input name="r2_2nddate" type="text"  id="to2" required/></td>
  </tr></form>
  <tr>
  <td><iframe id="I3" align="left" name="Range1"  >Your browser does not support inline frames or is currently configured not to display inline frames.
</iframe></td>
   <td><iframe id="I4" align="left" name="Range2" >Your browser does not support inline frames or is currently configured not to display inline frames.
</iframe></td> 
  </tr>
</table>
</fieldset>

JavaScript

$(function() {
    $( "#from1" ).datepicker({
      defaultDate: "+1w",
      changeMonth: true,
	  changeYear: true,  
      numberOfMonths: 1,
      onClose: function( selectedDate ) {
        $( "#to1" ).datepicker( "option", "minDate", selectedDate );
      }
    });
    $( "#to1" ).datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      changeYear: true,  
      numberOfMonths: 1,
      onClose: function( selectedDate ) {
        $( "#from1" ).datepicker( "option", "maxDate", selectedDate );
      }
    }); 
	 <!-- RangeComparison form submit , getting called after selecting 2nd date-->
	 $("#to1").change(function() { this.form.submit(); });  });

   
		
  $(function() {
    $( "#from2" ).datepicker({
      defaultDate: "+1w",
      changeMonth: true,
	  changeYear: true,  
      numberOfMonths: 1,
      onClose: function( selectedDate ) {
        $( "#to2" ).datepicker( "option", "minDate", selectedDate );
      }
    });
    $( "#to2" ).datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      changeYear: true,  
      numberOfMonths: 1,
      onClose: function( selectedDate ) {
        $( "#from2" ).datepicker( "option", "maxDate", selectedDate ); 
      }
    });
	 <!-- RangeComparison form submit , getting called after selecting 2nd date-->
  	 $("#to2").change(function() {
     this.form.submit(); });
  });