Trigger the JavaScript function just for the actual clicked id

I have a bunch of tooltips on one page. The child div (tooltip) gets shown through css when hovering over the parent div. Now I try to get it running on click. The first tooltip works and gets shown through my code and also gets hidden when I click outside the child div. I know the issue is with the id (has to be unique). How can I achieve, that the function is directly at the div applied, that I click on. Like when I click on the third div (parent), that it also gets triggered there with its child div (tooltip)? For me it´s weird that Javascript can´t identify on which element I click and then apply my function to that element unless I want something else... Now the first works, the rest is ignored... Hope u can help.

Thanks

//Showing the tooltip on click

document.getElementById("website-tooltip-container-1").addEventListener("click", function() {
  var element = document.getElementById("test-1");
  element.classList.add("website-tooltiptext-visible");
});

//Removing tooltip when clicked outside tooltip container or outside tooltip itself

document.addEventListener('mouseup', function(e) {
  var container = document.getElementById('test-1');
  if (!container.contains(e.target)) {
    container.classList.remove("website-tooltiptext-visible");
  }
});

/* Tooltip Container */

.website-tooltip {
  position: relative;
  display: flex;
  justify-content: center;
  cursor: pointer;
  font-family: Roboto;
  font-size: 18px;
  font-weight: 400;
  color: #666;
}


/* Tooltip text */

.website-tooltip .website-tooltiptext {
  visibility: hidden;
  max-width: 350px;
  font-family: open sans;
  font-size: 13px;
  line-height: 22px;
  background-color: #FFFFFF;
  color: #666;
  text-align: left;
  padding: 11px 15px 11px 15px !important;
  border-radius: 3px;
  box-shadow: 0px 5px 10px -2px rgba(0, 0, 0, 0.5);
  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  top: 100%;
  margin: 0px 0px 0px 0px;
}


/* Show the tooltip text when you mouse over the tooltip container */

.website-tooltip:hover .website-tooltiptext {
  visibility: visible;
}


/* Hide when hovering over tooltip div */

div.website-tooltiptext:hover {
  display: none;
}


/* Toggle this class to show Tooltip on click via Javascript */

.website-tooltiptext-visible {
  visibility: visible !important;
  display: block !important;
}

<div id="website-tooltip-container-1" class="website-tooltip"><span class="dottedunderline">Tooltip 1</span>
  <div id="test-1" class="website-tooltiptext">Blabalabalbalablablabla.
  </div>
</div>

<div id="website-tooltip-container-2" class="website-tooltip"><span class="dottedunderline">Tooltip 2</span>
  <div id="test-2" class="website-tooltiptext">Blabalabalbalablablabla.
  </div>
</div>

<div id="website-tooltip-container-3" class="website-tooltip"><span class="dottedunderline">Tooltip 3</span>
  <div id="test-3" class="website-tooltiptext">Blabalabalbalablablabla.
  </div>
</div>

<div id="website-tooltip-container-4" class="website-tooltip"><span class="dottedunderline">Tooltip 4</span>
  <div id="test-4" class="website-tooltiptext">Blabalabalbalablablabla.
  </div>
</div>

Solution

Let's take this step by step. First, wherever the user clicks you want to hide the existing tooltip, if there is one visible. One way to do that is to have this function:

function hideTooltip() {
  let el = document.querySelector(".website-tooltiptext-visible");
  if (el) { el.classList.remove("website-tooltiptext-visible");}
}

We want to hide the tooltip if the user clicks anywhere on the window so:

 window.addEventListener('click', hideTooltip);

Now for each of the elements where we want to show a tooltip (and I cannot tell from the question how to select these so you'll have to add a loop to do this)

el.addEventListener('click', showTooltip);

where

  function showTooltip(e) {
     e.stopPropagation(); // we don't want the window to see the click as well
     hideTooltip();
     this.classList.add("website-tooltiptext-visible");
}

UPDATE We now have the code in the question so it's possible to ascertain which elements are to be clickable. Here's a snippet with the above code added in (and references to hover and the original JS removed).

function showTooltip(event) {
  event.stopPropagation(); // we don't want the window to see the click as well
  hideTooltip();
  this.classList.add("website-tooltiptext-visible");
}
function hideTooltip() {
  let el = document.querySelector(".website-tooltiptext-visible");
  if (el) { el.classList.remove("website-tooltiptext-visible"); }
}

window.addEventListener('click', hideTooltip);//hide the tooltip if the user clicks anywhere on the window

//For each of the elements where we want to show a tooltip add an eventlistener to pick up clicks
const els = document.querySelectorAll(".website-tooltip");
for (let i = 0; i < els.length; i++) {
  els[i].addEventListener('click', showTooltip);
}

/* Tooltip Container */

.website-tooltip {
  position: relative;
  display: flex;
  justify-content: center;
  cursor: pointer;
  font-family: Roboto;
  font-size: 18px;
  font-weight: 400;
  color: #666;
  background-color: #eee; /* added just to show where the clickable areas are */
}

/* Tooltip text */

.website-tooltip .website-tooltiptext {
  visibility: hidden;
  max-width: 350px;
  font-family: open sans;
  font-size: 13px;
  line-height: 22px;
  background-color: #FFFFFF;
  color: #666;
  text-align: left;
  padding: 11px 15px 11px 15px !important;
  border-radius: 3px;
  box-shadow: 0px 5px 10px -2px rgba(0, 0, 0, 0.5);
  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  top: 100%;
  margin: 0px 0px 0px 0px;
}

/* Toggle this class to show Tooltip on click via Javascript */

.website-tooltiptext-visible .website-tooltiptext {
  visibility: visible;
  display: block;
}

<div id="website-tooltip-container-1" class="website-tooltip"><span class="dottedunderline">Tooltip 1</span>
  <div id="test-1" class="website-tooltiptext">Test-1 text Blabalabalbalablablabla.
  </div>
</div>

<div id="website-tooltip-container-2" class="website-tooltip"><span class="dottedunderline">Tooltip 2</span>
  <div id="test-2" class="website-tooltiptext">Test-2 text Blabalabalbalablablabla.
  </div>
</div>

<div id="website-tooltip-container-3" class="website-tooltip"><span class="dottedunderline">Tooltip 3</span>
  <div id="test-3" class="website-tooltiptext">Test-3 text Blabalabalbalablablabla.
  </div>
</div>

<div id="website-tooltip-container-4" class="website-tooltip"><span class="dottedunderline">Tooltip 4</span>
  <div id="test-4" class="website-tooltiptext">Test-4 text Blabalabalbalablablabla.
  </div>
</div>