Получить идентификатор одного из множества похожих элементов div

document.body.addEventListener("click",(e) => {
   const el = e.target;
   if (el.classList.contains("btnToggle")){
      const targetDiv = document.querySelector(el.dataset.target)
      targetDiv.classList.toggle("active")
   }
});

.contentDiv{display:none}
.active{
  display:block
}

<button data-target = "#myDIV1" class = "btnToggle">Try it 1</button>

<div id = "myDIV1" class = "contentDiv">
This is my DIV element. 1
</div>

<button data-target = "#myDIV2" class = "btnToggle">Try it 2</button>

<div id = "myDIV2" class = "contentDiv">
This is my DIV element. 2
</div>

// Get your element references you'll need just once,
// rather than each time the function is called.
// And note here that we can get the reference by
// searching for the first instance of an element 
// that matches the specified class.
const output = document.querySelector(".output");

// Set up events for your elements in JavaScript, not HTML
// Here, we'll set up a click event handler for the parent
// of the 3 sample buttons. When any button gets clicked,
// the click event will "bubble" up to the parent and be
// handeled there. This is called "event delegation".
document.querySelector(".wrapper").addEventListener("click", myFunction);

function myFunction(event) {
  // Check to see if the event was triggered 
  // by an element we care to handle
  if (event.target.classList.contains("topic")){
    // Update the status of the element
    event.target.closest("label").classList.toggle("active");
    
    // Check to see which button was clicked so we know which text to display
    if (event.target.classList.contains("a")){
      // This is called a "ternary operator" and works like this:
      // some value = condition ? value if condition is true : value if false
      output.textContent = output.textContent === "" ? "TOPIC A" : "";
    } else if (event.target.classList.contains("b")) {
      output.textContent = output.textContent === "" ? "TOPIC B" : "";   
    } else {
      output.textContent = output.textContent === "" ? "TOPIC C" : "";   
    }
  }
}

.hidden { display:none; }
.active { color:red; }

<div class = "wrapper">
  <!-- Don't set up events with inline HTML attributes. -->
  <label><input type = "checkbox" class = "hidden topic a">Try it 1</label>
  <label><input type = "checkbox" class = "hidden topic b">Try it 2</label>
  <label><input type = "checkbox" class = "hidden topic c">Try it 3</label>
</div>


<!-- No matter which button gets clicked, the appropriate
     content will go here. -->
<div class = "output"></div>

// Get the container element
const container = document.querySelector('.container');

// Assign one listener to the container
container.addEventListener('click', handleClick);

// Using the event from the listener
// 1) Check the target of the event is a button
// 2) Grab the button's sibling paragraph element
// 3) Toggle the show class on the paragraph
function handleClick(e) {
  if (e.target.matches('button')) {
    const para = e.target.previousElementSibling;
    para.classList.toggle('show');
  }
}

.container  { display: grid; grid-template-columns: repeat(2, 100px); gap: 0.25rem;}
.container section { background-color: #efefef; border: 1px solid #cdcdcd; padding: 0.25rem; text-align: center;}
p { opacity:0; transition: opacity 0.2s ease-in-out;}
.show { opacity: 1; }

<section class = "container">
  <section>
    <p>Text one</p>
    <button type = "button">Toggle text</button>
  </section>
  <section>
    <p>Text two</p>
    <button type = "button">Toggle text</button>
  </section>
  <section>
    <p>Text three</p>
    <button type = "button">Toggle text</button>
  </section>
  <section>
    <p>Text four</p>
    <button type = "button">Toggle text</button>
  </section>
</section>