How to Generate textboxes based on a numeric value from Dropdown Menu?

Forenote: I am extremely new and inexperienced with HTML and Javascript. Apologies for any inefficiencies or syntax that seems nonsensical.

I am currently trying to include a feature on an HTML page with a drop-down menu containing numeric values from 1 to 4. A corresponding amount of text boxes is generated based on the value chosen in the dropdown menu.

Here is the code I have so far:

<!-- begin snippet: js hide: false console: true babel: null -->
<!-- language: lang-html -->

<script>
  $("#elementreg").on("change", function() {
  var val = $(this).val();

  $(".types").hide().find('input:text').val(''); // 
  if (val) $("#" + val).show();
  });
</script>

<select class="medium" id="elementreg" name="IDs">
    <option value="" selected="selected"></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>

</select>

<div class="types" id="1">
  <input name="First Chip ID">
</div>

<div class="types" id="2">
    <input name="First Chip ID">
    <input name="Second Chip ID">
</div>

<div class="types" id="3">
    <input name="First Chip ID">
    <input name="Second Chip ID">
    <input name="Third Chip ID">
</div>

<div class="types" id="4">
    <input name="First Chip ID">
    <input name="Second Chip ID">
    <input name="Third Chip ID">
    <input name="Fourth Chip ID">
</div>

<!-- end snippet -->

The result is that nothing occurs when selecting the values on the dropdown menu and the input boxes are not hidden. My suspicion is that I need to include this CSS code snippet:

<!-- language: lang-css -->

.types {
  display: none
}

<!-- end snippet -->

But am out of my depth as to how to approach this. In addition, I am unsure if the script was implemented correctly to begin with. Any and all advice is greatly appreciated.

maybe this answer helpful for dynamic rendering without jquery

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

function fn1(val) {
  val = val.value;

  var containerElem = document.getElementById("container");
  containerElem.innerHTML = "";
  if (val == "") return;

  for (let i = 1; i <= val; i++) {
    var elem = document.createElement("input");
    elem.setAttribute("name", "chip" + i);
    containerElem.append(elem);
  }
}

<!-- language: lang-html -->

<select class="medium" onchange="fn1(this)" id="elementreg" name="IDs">
    <option value="" selected="selected"></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>
<div id=container></div>

<!-- end snippet -->

The problem is that the script gets executed before your DOM elements are rendered. So $("$elementreg") is not able to find the element for attaching the onChange listener.

So it's better to keep the scripts at the end of the body or use $( document ).ready()

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.types {
  display: none;
}

<!-- language: lang-html -->

<select class="medium" id="elementreg" name="IDs">
  <option value="" selected="selected"></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>

</select>

<div class="types" id="1">
  <input name="First Chip ID">
</div>

<div class="types" id="2">
  <input name="First Chip ID">
  <input name="Second Chip ID">
</div>

<div class="types" id="3">
  <input name="First Chip ID">
  <input name="Second Chip ID">
  <input name="Third Chip ID">
</div>

<div class="types" id="4">
  <input name="First Chip ID">
  <input name="Second Chip ID">
  <input name="Third Chip ID">
  <input name="Fourth Chip ID">
</div>


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

<script>
  $("#elementreg").on("change", function() {
    var val = $(this).val();
    $(".types").hide().find('input:text').val(''); // 
    if (val) $("#" + val).show();
  });
</script>

<!-- end snippet -->