JSFiddle - React, Tailwind, and code Playground

HTML

!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>form</title>
<link href="./css/style.css" rel="stylesheet">
</head>
 <body>
	
			<div class="line_buttom">       
		<select class="size_of_buttoms" name="child">
			<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>
		</select>
		возраст
		<span class="size_of_buttoms">
			<input name="agechild[]" class="agechild" style="display: none;" type="text">
			<input name="agechild[]" class="agechild" style="display: none;" type="text">
			<input name="agechild[]" class="agechild" style="display: none;" type="text">
			<input name="agechild[]" class="agechild" style="display: none;" type="text">
			<input name="agechild[]" class="agechild" style="display: none;" type="text">
		</span>
	</div>
			
</body>
</html>

JavaScript

<script>
document.querySelector('.size_of_buttoms').onchange = e => document.querySelectorAll('.agechild').forEach((el,i)=>el.style.display = i<+e.target.value?'block':'none');