JSFiddle - React, Tailwind, and code Playground

HTML

<details>
  <summary>
    tag 1
  </summary>
  content
</details>
<details>
  <summary>
    tag 2
  </summary>
  content
</details>
<button onclick="addtag();">
 add new tag
</button>
<div id="container">

</div>

JavaScript

var details = [...document.querySelectorAll('details')];
document.addEventListener('click', function(e) { 
 if (e.target && e.target.classList.contains('zhit')) {
     if (!details.some(f => f.contains(e.target))) {
       details.forEach(f => f.removeAttribute('open'));
     } else {
       details.forEach(f => !f.contains(e.target) ? f.removeAttribute('open') : '');
     }
     }
    });

function addtag() {
 document.getElementById('container').innerHTML += '<details class="zhit"><summary>new tag</summary>content</details>';
}