JSFiddle - React, Tailwind, and code Playground

by Md. Atiquzzaman Soikat

HTML

<span class="gdlr-reservation-field-title">Children</span>
<select name="gdlr-children-number[]"><option value="0">0</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><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option></select>

<div class = "display-text"></div><div id = "children-number" class="children-number"></div>

JavaScript

$('select[name="gdlr-children-number[]"]').on('change', function(e){
      var children_num = e.target.value;
      displayChildren(children_num); 
});  

function displayChildren(children_num)
{
		var min_num = 0;
		var max_num = 18;
		var options = '';
				
		options += '<select name = "age" class = "children-num">';
		options += '<option value = ""></option>';
		
		if(children_num == 0)
		{
			var display = $('.display-text').css('display', 'none');
		}	
		else if(children_num == 1)
		{
			var display = $('.display-text').html('<p>Age of child at check-out</p>').css('display', 'block');
		}	
		else if(children_num > 1)
		{
			var display = $('.display-text').html('<p>Ages of children at check-out</p>').css('display', 'block');
		}
	
		for( var i = min_num; i < max_num; i++ )
		{
			options += '<option value = '+i+' >'+i+'</option>';
			
		}
		options += '</select>&nbsp;';
		
		for(var i = 0; i<=children_num; i++)
		{
			$('select[name="gdlr-children-number[]"]').bind('change', function(){display;});
			
			document.getElementById("children-number").innerHTML = options.repeat(children_num);
				
		}
	}