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="">
        <span>
        <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>
        </span>
        <span>
        
      
        </span>
        <span><input name="number" type="text" style="width: 50px" /></span>
        </div>
        <div class="">
        <span>
        <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>
        </span>
        <span>
       
        
        
        </span>
        <span><input name="number" type="text" style="width: 50px" /></span>
        </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'],
            }
					
            
            $('select[name*="[]"]').change(function () {
            var $attribute = $(this).next('.attribute');
            var product = $(this).val(), lcns = attribute[product] || [];
	
            var html = $.map(lcns, function(lcn){
                return '<option value="' + lcn + '">' + lcn + '</option>'
            }).join('');
            $attribute.html(html)
            });
        });
        });