Javascript - Multiple Custom Dropdown don't work as expected

Question

I created dropdown menus using javascript. It works fine with one menu.

So what's the problem?

The Problem is when i have more than one menu and click either one, all the dropdown menus open.

Here is my code:

/* When the user clicks on the button, 
        toggle between hiding and showing the dropdown content */
function cDropdown($class) {

  var dropdownContent = document.getElementsByClassName($class);

  for (var i = 0; i < dropdownContent.length; i++) {
    dropdownContent[i].classList.toggle("show");
  }
}

var classname = document.getElementsByClassName("c-dropbtn");

for (var i = 0; i < classname.length; i++) {
  classname[i].addEventListener("click", function() {
    cDropdown("c-dropdown-content");
  });
}


// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.c-dropbtn')) {

    var dropdowns = document.getElementsByClassName("c-dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

/* The container <div> - needed to position the dropdown content */

.c-dropdown {
  position: relative;
  /*display: inline-block;*/
  margin-top: -15px;
}

/* Dropdown Content (Hidden by Default) */

.c-dropdown-content {
  position: absolute;
  top: 100%;
  left: auto;
  right: 11px;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 5rem;
  padding: .5rem 0;
  margin: .125rem 0 0;
  font-size: 1rem;
  color: #212529;
  text-align: left;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  box-shadow: 0px 0px 15px 1px rgba(113, 106, 202, 0.2);
  border-radius: 6px;
}

/* Links inside the dropdown */

.c-dropdown-content .c-dropdown-item {
  width: 100%;
  padding: 1px 13px;
  clear: both;
  font-weight: 400;
  color: #212529;
  text-align: inherit;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  font-size: 13px;
  font-weight: 600;
}

.c-dropdown-content .c-dropdown-item:hover {
  color: #e7515a;
}


/* Change color of dropdown links on hover */

.c-dropdown-content a:hover {
  background-color: #ddd
}


/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */

.show {
  display: block;
}

.content {
  height: 100px;
  padding: 10px;
}

<div class="content">
  <div class="c-dropdown text-right">
    <span id="c-dropdonbtn" class="c-dropbtn mr-2">fs</span>
    <div id="myDropdown" class="c-dropdown-content">
      <div class="c-dropdown-item">View</div>
      <div class="c-dropdown-item">Delete</div>
    </div>
  </div>
</div>


<div class="content">
  <div class="c-dropdown text-right">
    <span id="c-dropdonbtn" class="c-dropbtn mr-2">fs</span>
    <div id="myDropdown" class="c-dropdown-content">
      <div class="c-dropdown-item">View</div>
      <div class="c-dropdown-item">Delete</div>
    </div>
  </div>
</div>

Answer 1

You need to pass the dropbtn you clicked to the function, then show the element directly after the it, which is the c-dropdown-content associated with it. The snippet below does the job:

function cDropdown(e) {
  var dropdowns = document.getElementsByClassName("c-dropdown-content");
  for(var i = 0; i < dropdowns.length; i++) {
    dropdowns[i].classList.remove("show");
  }
  e.classList.toggle("show");
}

var classname = document.getElementsByClassName("c-dropbtn");

for (var i = 0; i < classname.length; i++) {
  classname[i].addEventListener("click", function() {
    cDropdown(this.nextElementSibling);
  });
}


// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.c-dropbtn')) {

    var dropdowns = document.getElementsByClassName("c-dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

.c-dropdown {
  position: relative;
  margin-top: -15px;
}

.c-dropdown-content {
  position: absolute;
  top: 100%;
  left: auto;
  right: 11px;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 5rem;
  padding: .5rem 0;
  margin: .125rem 0 0;
  font-size: 1rem;
  color: #212529;
  text-align: left;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  box-shadow: 0px 0px 15px 1px rgba(113, 106, 202, 0.2);
  border-radius: 6px;
}

.c-dropdown-content .c-dropdown-item {
  width: 100%;
  padding: 1px 13px;
  clear: both;
  font-weight: 400;
  color: #212529;
  text-align: inherit;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  font-size: 13px;
  font-weight: 600;
}

.c-dropdown-content .c-dropdown-item:hover {
  color: #e7515a;
}

.c-dropdown-content a:hover {
  background-color: #ddd
}

.show {
  display: block;
}

.content {
  height: 100px;
  padding: 10px;
}

<div class="content">
  <div class="c-dropdown text-right">
    <span class="c-dropbtn mr-2">fs</span>
    <div class="c-dropdown-content">
      <div class="c-dropdown-item">View</div>
      <div class="c-dropdown-item">Delete</div>
    </div>
  </div>
</div>


<div class="content">
  <div class="c-dropdown text-right">
    <span class="c-dropbtn mr-2">fs</span>
    <div class="c-dropdown-content">
      <div class="c-dropdown-item">View</div>
      <div class="c-dropdown-item">Delete</div>
    </div>
  </div>
</div>

I would like to add that you should not use an ID for more than one element. As IDs are irrelevant here, I removed them.