Showing and Hiding a div with a select in vanilla javascript

I am trying to show input elements in a form with HTML select options. I have 3 options DVD, book and furniture. Each has its product description input field such as weight, height, size (MB) and length. These inputs should be hidden and only show when the select option is changed. I want to use a for loop and not if or else conditionals. I am having trouble getting it to work, with the relevant hidden input to hide and show when the select button is selected.

<section class="add_products">
        <form class="input-form" action="" id="product_form">
            <div class="data-input">
                <label for="sku">SKU#:</label> 
                <input type="text" id="sku" name="sku">
            </div>
            
            <div class="data-input">
                <label for="name">NAME:</label>
                <input type="text" id="name" name="name">
            </div> 
           
            <div class="data-input">
                <label for="price">PRICE ($):</label>
                <input type="number" id="price" name="price">
            </div>
            
            <div class="input-group switcher"  >
                <label for="productType">Type Switcher:</label>
                <select class="list_products" id="productType" name="TypeSwitcher" 
                     onchange="selectChanged()">
                    <option value="1">DVD</option>
                    <option value="2">Book</option>
                    <option value="3">furniture</option>
                </select>
            </div>
          
            <div class="data-input product hidden">
                <label for="size">Size (MB):</label>
                <input type="number" class="hidden" id="size" name="price">
                <p class="describe">Please provide size in (MB)</p>
            </div>
            
            <div class="furniture product hidden">
                <label for="height">Height (CM):</label>
                <input type="number"  id="height" name="price">
            </div> 
            <div class="furniture product hidden">
                <label for="width">Width (CM):</label>
                <input type="number"  id="width" name="price">
            </div>
        
            <div class="furniture product hidden">
                <label for="length">Length (CM):</label>
                <input type="number" id="length" name="price">
                <p class="describe">Please provide measurements in (CM)</p>
            </div>
    
            <div class="data-input product hidden">
                <label for="weight">Weight (KG):</label>
                <input type="number" id="weight" name="price">
                <p class="describe">Please provide weight in KG</p>
            </div>

<script>

var display = {
    1: [],
    2: ["book"],
    3: ["dvd"],
    4: ["Furniture"],
   
  }
  
  function selectChanged() {
    var sel = document.getElementById("productType");
    for (var i = 1; i < 4; i++) {
          document.getElementById("product" + i).classList.add("hidden");
    }
    display[sel.value].forEach(function(i) {
          document.getElementById("product" + i).classList.remove("hidden");
    });
  }
  
</script>

Via Active questions tagged javascript - Stack Overflow https://ift.tt/z6cxWmK