JSFiddle - React, Tailwind, and code Playground

by Al Kasih

HTML

<select id="game">
    	<option value="01">01</option>
    	<option value="02">02</option>
    	<option value="03">03</option>
    	<option value="04">04</option>
    	<option value="05">05</option>
    	<option value="06">06</option>
    	<option value="07">07</option>
    </select>

	<select id="camp">
    	<option value="11">11</option>
    	<option value="22">22</option>
    	<option value="33">33</option>
    	<option value="44">44</option>
    	<option value="55">55</option>
    	<option value="66">66</option>
    	<option value="77">77</option>
    </select>

	<select id="manual"></select>
	<select id="automatic"></select>

JavaScript

function pad (str, max) 
		{
  			str = str.toString();
  			
			return str.length < max ? pad("0" + str, max) : str;
		}


	$("#game, #camp").on('change', function(){
		a = $("#game").val(), 
		b = $("#camp").val(),
		j = pad(a,2); 
		k = pad(b,2);
  	    c = j+k; 

	    $("#serial").empty();

			
	    for (var i = 1; i<=200; i++)
	   		 {
			 	 l = pad(i,3)
				 $("#manual").append("<option value='"+(c+l)+"'>"+(c+l)+"</option>");
	   		 }   


	var $auto = $('#automatic'),
		$manual = $('#manual'),
		lastValue = +$manual.find('option').last().val();
		
		$manual.on('change', function () {

				
			var value = +$(this).val(),
			max = lastValue;

			//alert(max); 
		
			$auto.empty();
	   
			for (var i = value; i < max; i++) 
				{
					$('<option>', 
						 {
							value:i+1,  
							text: i+1
						 }).appendTo($auto);
				}
		}).change()


	});