Close submenus of one menu item when another menu item’s button (‘cousin’ of first) is clicked with Javascript and no jQuery

function openLowerMenu(e) {
  const tgt = e.target;
  e.currentTarget.nextElementSibling.classList.toggle('test1', tgt.type === "button");
  e.currentTarget.nextElementSibling.classList.add('test2', tgt.type !== "button");
}

document.getElementById("stickymenuwrapper").addEventListener("click", function(e) {
  const tgt = e.target;
  if (tgt.type==="button") {
    const level = tgt.className.replace(/[^\d]/g,"");
    [...document.querySelectorAll('ul.level-'+level)].forEach(ul => ul.classList.add("hidden"));
    const show = tgt.classList.contains("triangle")
    tgt.nextElementSibling.classList.toggle("hidden",!show); 
    tgt.classList.toggle("triangle",!show);
  }
});

.row {
  margin: 0 1rem;
}

.outer {
  border: 2px solid gray;
  margin: 1rem;
  padding: 1rem;
}

.sticky-main-menu {
  z-index: 9999;
}

.stickymenuwrapper {
  background-color: #fff;
  transition-duration: 0s;
  padding: 0;
  margin: 0 auto;
  z-index: 995;
}

.scrabble-menu .hidden {
  display: none;
}

.scrabble-menu .navbar>li {
  display: inline-block;
}

.scrabble-menu ul {
  list-style: none;
  margin-bottom: 0;
  white-space: nowrap;
  padding: 0;
}

.scrabble-menu ul.navbar {
  background-color: pink;
  padding: 0 1rem;
  /* text-align: center;*/
}

.scrabble-menu li ul {
  position: absolute;
  top: 100%;
  background-color: pink;
  border: 1px solid red;
  padding: 0 12px 0 12px;
}

.scrabble-menu ul.level-2,
.scrabble-menu ul.level-3 {
  background-color: yellow;
  top: 0%;
  left: 100%;
  padding-bottom: 0.5rem;
}

.scrabble-menu ul.level-3 {
  background-color: orange;
}

.scrabble-menu li.active>a {
  text-decoration: underline;
}

.scrabble-menu a.separator:hover {
  text-decoration: none;
}

.scrabble-menu button,
.scrabble-menu button:focus {
  background: none;
  border: none;
  height: 2.5rem;
  width: 1.75rem;
  outline: none;
  padding: 0;
}

.scrabble-menu li {
  position: relative;
  display: flex;
  margin: 0;
  padding: 0;
  line-height: 1.5rem;
}

.scrabble-menu .navbar>li>a {
  padding: 0.5rem 0 0.5rem 0.5rem;
  margin-left: 1rem;
}

.scrabble-menu .navbar>li:first-child>a {
  padding: 0.5rem 0.5rem 0.5rem 0;
  margin-left: 0;
}


/* separator line code here */

.scrabble-menu li button:after {
  font-size: 0.8rem;
  position: relative;
  right: -3px;
  top: 0;
}

.scrabble-menu ul.level-1>li a {
  padding-top: 0.5rem;
}

.scrabble-menu li button[class^="btn-level"]:after {
  content: "\25B6";
  cursor: pointer;
}

.scrabble-menu li button[class^="btn-level"].triangle:after {
  content: "\25C0";
}

.scrabble-menu li button.btn-level-1:after {
  content: "\25B2";
}

.scrabble-menu li button.btn-level-1.triangle:after {
  content: "\25BC";
}

.scrabble-menu li button.btn-level-1.triangle2:after {
  content: "\25BC";
}

.scrabble-menu .clicked {}

.scrabble-menu li button[class^="btn-level"].not-clicked:after {
  content: "\25B0";
  cursor: pointer;
}

.scrabble-menu li button.btn-level-1.not-clicked::after {
  content: "\25BC";
}

<div class="row sticky-main-menu">
  <div id="stickymenuwrapper" class="col stickymenuwrapper scrabble-menu">
    <ul id="menucontent" class="scrabblemenu navbar">
      <li class="item-122 single divider deeper parent">
        <a class="two">ITEM ONE</a>
        <button class="btn-level-1 triangle" type="button"></button>
        <ul id="drop-122" class="hidden level-1">
          <li class="item-121 single">
            <a href="/" class="">Item One level 2</a>
          </li>
          <li class="item-134 single deeper parent">
            <a class="nav-header two">Item One level 2 menu heading</a>
            <button class="btn-level-2" type="button"></button>
            <ul id="drop-134" class="level-2 hidden">
              <li class="item-135 single">
                <a href="/" class="">Article under menu heading</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li class="item-122 single divider deeper parent">
        <a class="two">ITEM TWO</a>
        <button class="btn-level-1 triangle" type="button"></button>
        <ul id="drop-122" class="hidden level-1">
          <li class="item-121 single">
            <a href="/" class="">Item Two level 2</a>
          </li>
          <li class="item-134 single deeper parent">
            <a class="nav-header two">Item Two level 2 menu heading</a>
            <button class="btn-level-2" type="button"></button>
            <ul id="drop-134" class="level-2 hidden">
              <li class="item-135 single">
                <a href="/" class="">Article under menu heading</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li class="item-103 single deeper parent">
        <a href="/" class="two">ITEM THREE WITH LINK</a>
        <button class="btn-level-1 triangle" type="button"></button>
        <ul class="not-separator level-1 hidden">
          <li class="item-104 single">
            <a href="/" class="">Article under Item Three</a>
          </li>
          <li class="">
            <a class="two separator">Item Three Level 2 separator</a>
            <button class="btn-level-2" type="button"></button>
            <ul id="drop-107" class="level-2 hidden">
              <li class="item-108 single">
                <a href="/" class="">Lower article</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>