JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form class="input" action="test.php" method="post">
  <div class="options">
		<select name="product[]" class="custom-select form-control-sm product">
			<option></option>
            <option value="shoes">Boots</option>
            <option value="trous">Trousers</option>
            <option value="shirt">Shirt</option>
            <option value="hoodie">Hoodie</option>
        </select>
		<select name="att[]" class="custom-select form-control-sm attribute">
		</select>
        <select name="size[]" class="custom-select form-control-sm size">
		</select>
	   <input name="number[]" type="text" style="width: 50px"/>
    </div>
    <div class="options">
		<select name="product[]" class="custom-select form-control-sm product">
			<option></option>
            <option value="shoes">Boots</option>
            <option value="trous">Trousers</option>
            <option value="shirt">Shirt</option>
            <option value="hoodie">Hoodie</option>
        </select>
		<select name="att[]" class="custom-select form-control-sm attribute">
		</select>
        <select name="size[]" class="custom-select form-control-sm size">
		</select>
	   <input name="number[]" type="text" style="width: 50px"/>
    </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

JavaScript

$(document).ready(function() {
          $('select[name*="[]"]').each(function(){
             
            var attribute = {
            'shoes': ['standard'],
            'trous': ['male', 'female'],
            'shirt': ['blue', 'red', 'green', 'brown', 'yellow'],
            'hoodie': ['blue', 'red'],
            }
            
            var size = {
                'shoes': ['35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46'],
                'trous': ['44', '46', '48', '50', '52', '54', '56', '58', '60', '62', '64'],
                'shirt': ['S', 'M', 'L', 'XL', 'XXL'],
                'hoodie': ['S', 'M', 'L', 'XL', 'XXL'],
            }
					
            $('select[name*="[]"]').change(function () {
            var $attribute = $(this).next('.attribute');
            var product = $(this).val(), attProd = attribute[product] || [];
            
			var html = $.map(attProd, function (attOpt) {
                return '<option value="' + attOpt + '">' + attOpt + '</option>'
			}).join('');
			$attribute.html(html)
		   });
            
            ('select[name*="[]"]').change(function () {
            var $size = $('select').next('.size');
            var product = $(this).val(), sizeProd = size[product] || [];
                
            var htmlS = $.map(sizeProd, function(sProd){
                return '<option value="' + sProd + '">' + sProd + '</option>'
            }).join('');
            $size.html(htmlS)
            });
	       });
        });