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">
<script>
    document.addEventListener("DOMContentLoaded", function(){
document.querySelector('.size_of_buttoms').onchange = e => document.querySelectorAll('.agechild').forEach((el,i)=>el.style.display = i<+e.target.value?'block':'none');
});
    </script>
     
    
</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

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