JSFiddle - React, Tailwind, and code Playground

by klierik

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="form-group">
  <label for="exampleFormControlSelect1">Example select</label>
  <select class="form-control" id="exampleFormControlSelect1">
      <option disabled selected>Choose your fields qty</option>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
</div>

<div class="fields">
  <div class="form-group">
    <label for="">Example Teaxarea #1</label>
    <textarea name="" id="" cols="30" rows="2" class="form-control"></textarea>
  </div>
  <div class="form-group">
    <label for="">Example Teaxarea #2</label>
    <textarea name="" id="" cols="30" rows="2" class="form-control"></textarea>
  </div>
  <div class="form-group">
    <label for="">Example Teaxarea #3</label>
    <textarea name="" id="" cols="30" rows="2" class="form-control"></textarea>
  </div>
  <div class="form-group">
    <label for="">Example Teaxarea #4</label>
    <textarea name="" id="" cols="30" rows="2" class="form-control"></textarea>
  </div>
  <div class="form-group">
    <label for="">Example Teaxarea #5</label>
    <textarea name="" id="" cols="30" rows="2" class="form-control"></textarea>
  </div>
</div>

SCSS

body {
  padding: 5%;
}

.fields .form-group {
  display: none;
}

JavaScript

$('#exampleFormControlSelect1').on('change', function() {
  var $formGroupList = $('.fields .form-group'),
    qty = $(this).val();

  // hide all fields
  $formGroupList.hide()

  // show qty fields
  $formGroupList.each(function() {
    if ($(this).index() < qty) {
      $(this).show()
    }
  })
})