Excluding an additional id from Javascript function

Question

Is it possible to add an id to this code, so that it doesn´t trigger when the desired container itself (mobile-navigation) is clicked PLUS an additional id (hamburger-menu-div). I have a button to trigger the navigation (hamburger-menu-div). It toggles a class. So when I click that specific button, this code should do nothing... Is that possible or do I have a thinking error here?

//Actual code and working but how to insert an additional id to avoid triggering it also on that id

document.addEventListener('mouseup', function(e) {
  var container = document.getElementById('mobile-navigation');
  if (!container.contains(e.target)) {
    container.style.display = 'none';
  }
});

//Changed to this code to select multiple ids but not working

document.addEventListener('mouseup', function(e) {
  var container = document.querySelectorAll('mobile-navigation, hamburger-menu-div');
  if (!container.contains(e.target)) {
    container.style.display = 'none';
  }
});

Thanks for your support!

EDIT: PLACING IN SOME MORE CODE FOR BETTER UNDERSTANDING:

//Toggle nav menu to show and hide

document.getElementById("hamburger-menu-div").addEventListener("click", function() {
  var x = document.getElementById("mobile-navigation");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
});


//Hide it when clicked outside

var container = document.querySelectorAll('#mobile-navigation, #hamburger-menu-div');
document.addEventListener('mouseup', function(e) {
  console.log(e.target);
  var set = 0;
  for (var i = 0; i < container.length; i++) {
    if (e.target == container[i]) {
      set = 1;
    }
  }
  if (set === 0) {
    container[1].style.display = 'none';
  }
});

.hamburger-menu-div {
  background-color: lightblue;
  width: 250px;
  height: 50px;
}

.mobile-navigation {
  background-color: lightgreen;
  width: 250px;
  display: none;
  position: fixed;
  top: 0;
  right: 0;
}

<div id="hamburger-menu-div" class="hamburger-menu-div">
  BUTTON
</div>


<div id="mobile-navigation" class="mobile-navigation">
  <p>- Navigationpoint 1</p>
  <p>- Navigationpoint 2</p>
  <p>- Navigationpoint 3</p>
  <p>- Navigationpoint 4</p>
  <p>- Navigationpoint 5</p>
</div>

Answer 1

Let me know If this was not what you wanted. It seems from your code you want to hide the element that was not clicked, correct?

var container = document.querySelectorAll('#mobile-navigation, #hamburger-menu-div');
document.addEventListener('mouseup', function(e) {
  //console.log(container);
  for (var i = 0; i < container.length; i++) {
    if (!(container[i].contains(e.target))) {
      container[i].style.display = 'none';
    }
  }
});

<div id = 'mobile-navigation'>
lorem
</div>
<div id = 'hamburger-menu-div'>
ipsem
</div>

another attempt:

var container = document.querySelectorAll('#mobile-navigation, #hamburger-menu-div');
document.addEventListener('mouseup', function(e) {
  console.log(e.target);
  var set=0;
  for (var i = 0; i < container.length; i++) {
    if (e.target==container[i]) {
      set=1;
    }
  }
  if(set===0){
  container[0].style.display = 'none';
  }
});
//this does the same as the code below, but with two ids..
/*
document.addEventListener('mouseup', function(e) {
  var container = document.getElementById('mobile-navigation');
  if (!container.contains(e.target)) {
    container.style.display = 'none';
  }
});
*/

<div id = 'mobile-navigation'>
mobile-navigation
</div>
<br>
<br>
<br>
<div id = 'hamburger-menu-div'>
hamburger-menu-div
</div>
<br>
<div>
click here to close menu
</div>

Third attempt: Now that you have provided HTML (always better to do this), and have explained what you are trying to do, this solution should work. If it doesn't, let me know exactly what isn't good and I will fix it.

//Toggle nav menu to show and hide

document.getElementById("hamburger-menu-div").addEventListener("click", function() {
  var x = document.getElementById("mobile-navigation");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
});


//Hide it when clicked outside

var x = document.getElementById("mobile-navigation");
document.addEventListener('mouseup', function(e) {
  console.log(e.target);
  if (!(x.contains(e.target) || e.target == document.getElementById("hamburger-menu-div"))) {
    x.style.display = 'none';
  }
});

.hamburger-menu-div {
  background-color: lightblue;
  width: 250px;
  height: 50px;
}

.mobile-navigation {
  background-color: lightgreen;
  width: 250px;
  display: none;
  position: fixed;
  top: 0;
  right: 0;
}

<div id="hamburger-menu-div" class="hamburger-menu-div">
  hamburger-menu-div
</div>


<div id="mobile-navigation" class="mobile-navigation">
  <h1> mobile nav </h1>
  <p>- Navigationpoint 1</p>
  <p>- Navigationpoint 2</p>
  <p>- Navigationpoint 3</p>
  <p>- Navigationpoint 4</p>
  <p>- Navigationpoint 5</p>
</div>