Отображение условных полей в HTML & JS дважды

Question

У меня есть список многих элементов. Когда у меня есть кнопка, я хочу отобразить следующий список. Пока здесь все хорошо. Когда я повторил эту процедуру для вновь открытого списка, код не работал. Почему?

//here open the first list

$("#product").change(function() { //product is id from first list
  var selected = $("#product").val();
  $('p').hide(); //p represents Paragraph. 
  $('#' + selected).show();

});

$(document).ready(function() {
  $('p').hide();
});

//here, i want to repeat same code for next list, but didn t work...

$("#1").change(function() { //1 is id from second list
  var selected = $("#1").val();
  $('p').hide(); //p represents Paragraph. 
  $('#' + selected).show();

});

$(document).ready(function() {
  $('p').hide(); //p represents Paragraph. 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="product" name="faculty" required="">
  <option value="">-- Choose--</option>

  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

<p id="1">
  <select id="1" name="domeniul_mate_info" required="">

    <option value="">-- Choose--</option>
    <option value="info">Info</option>
    <option value="math">Math</option>

  </select>

</p>

<p id="info">
  <select name="info" required="">

    <option value="">-- Choose--</option>
    <option value="info1">info1</option>
    <option value="info2">info2</option>

  </select>

</p>

Answer 1

Причина в том, что вы используете дубликат идентификатора селектора 1 для элемента

и элемента. Вы можете использовать только уникальный идентификатор селектора. Я обновил ваш код, найдите приведенный ниже код и сообщите мне, если возникнет какая-либо проблема.

const product = [1, 2, 3];
const productDropDown1Relation = {
  1: ['info', 'math'],
  2: ['history', 'geography'],
  3: ['science', 'sport'],
}
const dropDown1DropDown2Relation = {
  info: ['info1', 'info2'],
  math: ['math1', 'math2'],
  history: ['history1', 'history2'],
  geography: ['geography1', 'geography2'],
  science: ['science1', 'science2'],
  sport: ['sport1', 'sport2'],
}


$(document).ready(function() {

  $("#dropdown2, #dropdown3").hide();
  const optionString = buildOptions(product);
  $("#product").html(optionString);

  $("#product").change(function() {
    debugger;
    const selected = $("#product").val();
    const optinString = buildOptions(productDropDown1Relation[selected]);
    $('#dropdown2').html(optinString);
    $('#dropdown2').show();
  });

  $("#dropdown2").change(function() {
    const selected = $("#dropdown2").val();
    const optinString = buildOptions(dropDown1DropDown2Relation[selected]);
    $('#dropdown3').html(optinString);
    $('#dropdown3').show();
  });
});

function buildOptions(arr) {
  let optionString = `<option value=''>--Choose--</option>`;
  for (const element of arr) {
    optionString += `<option value='${element}'>${element}</option>`;
  }
  return optionString;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="product" name="faculty" required="">
</select>

<select id="dropdown2" name="dropdown2" required="">
</select>

<select id="dropdown3" name="dropdown3" required="">
</select>