Javascript only work for first block?

Question

First of all please bear with me I'm a newbie ^^

I wanna make a checkbox list:

• checkbox 1
• checkbox 2
• checkbox 3

if checkbox 1 is checked, block_1 will be displayed, and so on, but it only works for the first block, if I move block_2 above block_1 it'll be the one that's working, what's wrong?

function show(id) {
  var checkBox = document.getElementById(id);
  var checkList = document.getElementById("block_" + id);
  if (checkBox.checked) {
    checkList.style.display = "block";
  } else {
    checkList.style.display = "none";
  }
}

<input type="checkbox" id="1" onclick="show(1)"> Concrete <br>
<input type="checkbox" id="2" onclick="show(2)"> Soil Mechanics <br>
<input type="checkbox" id="3" onclick="show(3)"> Hidraulics <br>
<hr>

<div id="block_1" style="display:none">
  <input type="checkbox"> experiment A <br>
  <input type="checkbox"> experiment B <br>
  <input type="checkbox"> experiment C <br>
<div>

<div id="block_2" style="display:none">
  <input type="checkbox"> experiment D <br>
  <input type="checkbox"> experiment E <br>
  <input type="checkbox"> experiment F <br>
<div>

<div id="block_3" style="display:none">
  <input type="checkbox"> experiment G <br>
  <input type="checkbox"> experiment H <br>
  <input type="checkbox"> experiment I <br>
<div>

Thank you :)

Answer 1

Your JS code is fine. The real problem is your HTML. Close your div tags. This is creating behavioral issues with the code

<div id="block_1" style="display:none">
  <input type="checkbox"> experiment A <br>
  <input type="checkbox"> experiment B <br>
  <input type="checkbox"> experiment C <br>
</div>

<div id="block_2" style="display:none">
  <input type="checkbox"> experiment D <br>
  <input type="checkbox"> experiment E <br>
  <input type="checkbox"> experiment F <br>
</div>

<div id="block_3" style="display:none">
  <input type="checkbox"> experiment G <br>
  <input type="checkbox"> experiment H <br>
  <input type="checkbox"> experiment I <br>
</div>

Answer 2

There are two issues:

1. Each closing tag to your <div> block is missing the / character; add it to look like </div>
2. Your id attributes are incorrect. As specified in the HTML5 spec, they must contain at least one character. For HTML4 they much start with a character. To avoid other quirks, do not use only numbers.

Below includes these changes:

function show(id) {
  let checkBox = document.getElementById('check_' + id),
      checkList = document.getElementById('block_' + id);

  checkList.style.display = checkBox.checked ? 'block' : 'none';
}

<input type="checkbox" id="check_1" onclick="show(1)"> Concrete <br>
<input type="checkbox" id="check_2" onclick="show(2)"> Soil Mechanics <br>
<input type="checkbox" id="check_3" onclick="show(3)"> Hidraulics <br>
<hr>

<div id="block_1" style="display:none">
  <input type="checkbox"> experiment A <br>
  <input type="checkbox"> experiment B <br>
  <input type="checkbox"> experiment C <br>
</div>

<div id="block_2" style="display:none">
  <input type="checkbox"> experiment D <br>
  <input type="checkbox"> experiment E <br>
  <input type="checkbox"> experiment F <br>
</div>

<div id="block_3" style="display:none">
  <input type="checkbox"> experiment G <br>
  <input type="checkbox"> experiment H <br>
  <input type="checkbox"> experiment I <br>
</div>