помощь с JS

[VGreen 10]

Всем доброго времени суток, помогите пожалуйста кому не сложно

<div class="dropdown">
	<button onclick="myFunction()" class="dropbtn">Выпадающий</button>
	<div id="myDropdown" class="dropdown-content">
		<a href="#">Ссылка 1</a>
		<a href="#">Ссылка 2</a>
		<a href="#">Ссылка 3</a>
	</div>
</div>

<div class="dropdown1">
	<button onclick="myFunction1()" class="dropbtn1">Выпадающий</button>
	<div id="myDropdown1" class="dropdown-content1">
		<a href="#">Ссылка 1</a>
		<a href="#">Ссылка 2</a>
		<a href="#">Ссылка 3</a>
	</div>
</div>

.dropbtn {
    background-color: #3498DB;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
    background-color: #2980B9;
}
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
.dropdown-content a:hover {background-color: #ddd}
.show {display:block;}

.dropbtn1 {
    background-color: #71db34;
    color: rgb(224, 22, 15);
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}
.dropbtn1:hover, .dropbtn1:focus {
    background-color: #29b948;
}
.dropdown1 {
    position: relative;
    display: inline-block;
}
.dropdown-content1 {
    display: none;
    position: absolute;
    background-color: #4651bb;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
.dropdown-content1 a {
    color: rgb(255, 0, 0);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
.dropdown-content1 a:hover {background-color: #ddd}
.show1 {display:block;}

function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

function myFunction1() {
  document.getElementById("myDropdown1").classList.toggle("show1");
}
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn','.dropbtn1')) {
    var dropdowns = document.getElementsByClassName("dropdown-content","dropdown-content1");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show','show1')) {
        openDropdown.classList.remove('show','show1');
      }
    }
  }
}

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