Checkbox toggle content section not working for all checkboxes

I have created 4 checkbox toggle with details but same time only one checkbox toggle is working when I am clicking on another 3 toggle is not working, what do I change the script of html code so make all checkboxes work. P

<!-- Check box dropdown -->
<script>
function myFunction() {
  // Get the checkbox
  var checkBox = document.getElementById("myCheck");
  // Get the output text
  var text = document.getElementById("text");

  // If the checkbox is checked, display the output text
  if (checkBox.checked == true){
    text.style.display = "block";
  } else {
    text.style.display = "none";
  }
}
</script>
<!-- Check box dropdown -->

<div class="checkbox">
                     <label><input type="checkbox" id="chkNIRF" onclick="myFunction()"><p class="text-grey">Demo</p></label>
                     <label><input type="checkbox" id="chkNAAC" onclick="myFunction()"><p class="text-grey">Demo</p></label>
                     <label><input type="checkbox" id="chkINI" onclick="myFunction()"><p class="text-grey">Demo</p></label>
                     <label><input type="checkbox" id="chkIoE" onclick="myFunction()"><p class="text-grey">Demo</p></label>
                </div>
                
                   <p id="text" id="text" style="display:none">Checkbox is CHECKED!</p>
                   <p id="text" id="text" style="display:none">Checkbox is CHECKED!</p>                
                   <p id="text" id="text" style="display:none">Checkbox is CHECKED!</p>                
                   <p id="text" id="text" style="display:none">Checkbox is CHECKED!</p>    
                 

laced html and javascript code, please help to fix the issue...