JSFiddle - React, Tailwind, and code Playground

by Vitaliy T

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<form class="r89__someTable">
  <div>
    <select id="generalSelect">
      <option value="1" selected>Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
  </div>
  <div class="js_addOptions">
    <div id="select_1">
      <p><label for="ss_1">Text 1</label><input type="text" id="ss_1"></p>
      <p><label for="ss_2">Text 2</label><input type="text" id="ss_2"></p>
      <p><label for="ss_3">Text 3</label><input type="text" id="ss_3"></p>
    </div>
    <div id="select_2" class="r89__hide">
      <p><label for="ss_11">Text 11</label><input type="text" id="ss_11"></p>
      <p><label for="ss_12">Text 12</label><input type="text" id="ss_12"></p>
    </div>
    <div id="select_3" class="r89__hide">
      <p>Empty</p>
    </div>
  </div>
</form>

CSS

.r89__someTable{padding: 20px;margin: 10px; border: 1px solid red;}
.r89__someTable div{margin: 10px;}
.r89__someTable div label{display: block;}
.r89__hide{display: none;}

JavaScript

// функция - обработчик события onChange (изменения опции в выбраннос select)
$('#generalSelect').on('change', function() { // выбираем select по ID
  var selected = '#select_' + this.value; // сохраняем в переменную выбранный option, this.value - value у выбранной опции
  $('div[id^="select_"]').addClass('r89__hide'); // добавляем ко всем у кого нет - класс r89__hide , он добавляет свойство display: none, т.е. скрывает блок
  $(selected).removeClass('r89__hide'); // удаляем класс r89__hide у блока, который привязан к выбранной опции
});