Can I show input opts only after selecting from ‘select’ tag in JQuery/JS?

// using a named function to handle the show/hide functionality, this function
// takes one argument - 'evt', a reference to the event that this function
// is to handle - and is passed automatically from the (later) use of
// EventTarget.addEventListener():
const showOnChoice = (evt) => {
  // here we use destructuring assignment, retrieving the
  // currentTarget property-value from the currentTarget
  // property of the Event-Object ('evt'); the currentTarget
  // is the element to which this function was bound:
  let {
    currentTarget
  } = evt, {
    // again using destructuring assignment, this time
    // to assign the value of the currentTarget element
    // to the variable of 'value':
    value
  } = currentTarget,
  // here we retrieve the element that we wish to show,
  // using document.querySelector() - along with a
  // template-literal, to interpolate the value variable
  // into the selector string - this retrieves the first
  // matching element in the document (it may return null
  // if there is no matching element, so consider sanity-
  // checks to verify its existence in production):
  toShow = document.querySelector(`.info-block.${value}`),
    // here we retrieve all elements that match the
    // supplied selector - again, using a template string -
    // to create the selector:
    toHide = document.querySelectorAll(`.info-block:not(.${value})`);

  // using NodeList.prototype.forEach() to iterate over the
  // NodeList, passing one argument to the anonymous (Arrow)
  // function; 'el' is a reference to the current Node of
  // the NodeList we're iterating over:
  toHide.forEach(
    // and in the function we set the Node's 'hidden'
    // property-value to true (in order to hide the element):
    (el) => el.hidden = true
  );

  // here we set the hidden property-value of the
  // element we wish to show to false, in order
  // to show that element:
  toShow.hidden = false;
}

document.querySelectorAll('.info-block').forEach(
  (el) => el.hidden = true
);
document.querySelector('#productType').addEventListener('change', showOnChoice);

label::after {
  content: ': ';
}

<form>
  <!-- all duplicate ids have been removed, *never* use duplicate
       ids; they're invalid and speak to either a lack of
       knowledge or lack of concern for one's code, and cause
       JavaScript problems in any situation that relies upon
       those ids: -->
  <fieldset>
    <label for="productType">Type Switcher</label>
    <select id="productType">
      <!-- you're clearly using the first <option> as the
           label/instruction for the users; this should
           never be chosen by the user so here we first
           set it as the selected option on page-load,
           and set it to disabled (a Boolean attribute
           that doesn't need a value, but if one is
           provided will always disable the element
           regardless of that value, because strings
           are truthy). This means that once the user
           opens the <select>, and navigates to another
           <option> they can't re-select this <option>
           (unless they use the developer console, but
           that's a problem for another time and another
           question): -->
      <option disabled selected>--Select a Type</option>
      <option value="DVD">DVD</option>
      <option value="Book">Book</option>
      <option value="Furniture">Furniture</option>
    </select>
  </fieldset>

  <div class="subform-test-class">
    <fieldset class="DVD info-block">
      <label for="DVD">Size (MB)</label>
      <input type="text" id="DVD" name="dvdSize">
      <p>*Please provide size of the DVD (MB)</p>
    </fieldset>
    <fieldset class="Book info-block">
      <label for="weight" id="book">Weight (KG)</label>
      <input type="text" id="weight" name="bookWeight">
      <p>*Please provide weight of the book in KG.</p>
    </fieldset>

    <fieldset class="Furniture info-block">
      <label for="height">Height</label>
      <input type="text" id="height" name="fHeight">

      <label for="#width">Width</label>
      <input type="text" id="width" name="fWidth">

      <label for="length">Length</label>
      <input type="text" id="length" name="fLength">
      <p>*Please provide size of the furniture in dimensions of HxWxL</p>
    </fieldset>
  </div>
</form>

// hiding all elements matched by the selector:
$('.info-block').hide();

// binding the anonymous function of the on() method
// as the event-handler for the 'change' event:
$('#productType').on('change', function(){

  // caching the value of the <select> element
  // ('this' refers to the element to which
  // the event was triggered):
  let value = $(this).val();
  
  // here we select all elements matching the
  // supplied selector, and iterate over that
  // collection using each():
  $('.info-block').each(function(){
    // here we toggle the display of the current
    // element of the collection; to do this we
    // test to see if the element has a class-name
    // equal to the <select> element's chosen value;
    // if this evaluates to true the element is
    // shown, if it evaluates to false the
    // element is, or remains, hidden:
    $(this).toggle( $(this).hasClass(value) );
  });
});

label::after {
  content: ': ';
}

<form>
  <!-- all duplicate ids have been removed, *never* use duplicate
       ids; they're invalid and speak to either a lack of
       knowledge or lack of concern for one's code, and cause
       JavaScript problems in any situation that relies upon
       those ids: -->
  <fieldset>
    <label for="productType">Type Switcher</label>
    <select id="productType">
      <!-- you're clearly using the first <option> as the
           label/instruction for the users; this should
           never be chosen by the user so here we first
           set it as the selected option on page-load,
           and set it to disabled (a Boolean attribute
           that doesn't need a value, but if one is
           provided will always disable the element
           regardless of that value, because strings
           are truthy). This means that once the user
           opens the <select>, and navigates to another
           <option> they can't re-select this <option>
           (unless they use the developer console, but
           that's a problem for another time and another
           question): -->
      <option disabled selected>--Select a Type</option>
      <option value="DVD">DVD</option>
      <option value="Book">Book</option>
      <option value="Furniture">Furniture</option>
    </select>
  </fieldset>

  <div class="subform-test-class">
    <fieldset class="DVD info-block">
      <label for="DVD">Size (MB)</label>
      <input type="text" id="DVD" name="dvdSize">
      <p>*Please provide size of the DVD (MB)</p>
    </fieldset>
    <fieldset class="Book info-block">
      <label for="weight" id="book">Weight (KG)</label>
      <input type="text" id="weight" name="bookWeight">
      <p>*Please provide weight of the book in KG.</p>
    </fieldset>

    <fieldset class="Furniture info-block">
      <label for="height">Height</label>
      <input type="text" id="height" name="fHeight">

      <label for="#width">Width</label>
      <input type="text" id="width" name="fWidth">

      <label for="length">Length</label>
      <input type="text" id="length" name="fLength">
      <p>*Please provide size of the furniture in dimensions of HxWxL</p>
    </fieldset>
  </div>
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

document.querySelectorAll('input').forEach(
  (el) => el.addEventListener('input', (evt) => {
    let value = evt.currentTarget.value;

    document.querySelector('.highlight')?.classList.remove('highlight');
      document.querySelector(
      // here we're using a template-literal (again) to interpolate the
      // value variable with the string; to select the relevant element:
      // 1. we use the '#' character,
      // 2. we then use a back-slash ('') character to escape the
      // second back-slash character, because we need to use that to
      // create a valid CSS selector in which the second '#' character
      // must be escaped with that second back-slash. This does work,
      // but complicating your development life like this does feel
      // like a ridiculous approach:
      `#\${value}`
      ).classList.add('highlight');
  })
);

label {
  aspect-ratio: 1.75;
  border: 2px solid lightblue;
  border-radius: 0.5rem;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  gap: 0.25rem;
  inline-size: 5rem;
  margin-inline-end: 0.5rem;
  padding: 0.25rem;
}

.choices {
  border: 0.25rem solid hsl(300deg 95% 65% / 0.9);
  display: flex;
  gap: 1rem;
  justify-content: center;
  padding-block: 1rem;
}

div[id] {
  aspect-ratio: 1;
  border: 0.25rem solid var(--borderColor);
  display: grid;
  flex-basis: 10%;
  place-content: center;
}

div[id]::before {
  color: #999;
  font-weight: 600;
  content: attr(id);
  padding: 0.5rem;
}

##one {
  --borderColor: hsl(120deg 90% 95% / 1);
}

##two {
  --borderColor: hsl(240deg 90% 95% / 1);
}

##three {
  --borderColor: hsl(360deg 90% 95% / 1);
}

.highlight {
  background-image: repeating-linear-gradient(to bottom right, var(--borderColor) 0 5px, transparent 5px 15px);
  color: color-mix(in srgb-linear, #fff 0%, var(--borderColor));
  outline: 4px solid var(--borderColor);
  outline-offset: 0.25rem;
}

<h2>Choose an element to highlight:</h2>
<!-- adding the '#' character in the value attribute-values: -->
<label>One: <input type="radio" value="#one" name="choice"></label>
<label>two: <input type="radio" value="#two" name="choice"></label>
<label>three: <input type="radio" value="#three" name="choice"></label>

<div class="choices">
  <!-- adding the '#' character in the id attribute-values: -->
  <div id="#one"></div>
  <div id="#two"></div>
  <div id="#three"></div>
</div>