Creating drop downs that are separate

Question

Iv'e created a dropdown that requires you to click on text to show more text underneath. The code is:

.dropbtn {
  cursor: pointer;
  font-weight: bold;
}

.dropdown03 {
  position: relative;
  display: inline-block;
  text-align: left;
  width: 100%;
}

.dropdown-content03 {
  display: none;
  position: relative;
  width: 100%;
  overflow: auto;
  z-index: 1;
}

.show {display: block;} 

 <script>
  /* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content03");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script> 

<div class="dropdown03">
  <button onclick="myFunction()" class="dropbtn">Dropdown Button Text</button>
  <div id="myDropdown" class="dropdown-content03">
  Dropdown Button Text
    </div>
</div>

This code has works perfectly in my website and when you click on "Dropdown Button Text" then "Dropdown Button Text" appeasers below it. Here is my trouble; when i add another dropdown using the same code, the first dropdown on the website will show but the one that the button is above doesn't. In other words when i add more then one dropdown all the new ones don't work they only end up showing the first dropdowns content. (hopefully this makes sense)

How can i have more than one dropdown that will load is own content when clicked? Do i have to create a whole new tag for each one?

Answer 1

Changing the names of id's and classes would help. just try by doing so. Also check for the console by clicking the inspect button. Take a look at your HTML from inspect tab. Make sure there are no errors in the console.

Make sure while reloading the browser, your hard refresh by Ctrl+F5.