The biggest issue is that you're using IDs when you should be using classes. IDs must be unique to each element in a page. When you repeat an ID, JS will only target the first element using that ID. That's why only the first one is working.

The second issue is that, because of the way the script is written, it will only target a single element. What you need to do is get all the elements you want to target by something like their class name and then loop through them, applying the event listener to each one and its appropriate children.

EDIT: Here is an example from some code I wrote for a page with multiple accordions a few weeks ago in vanilla JS

//Below I establish a counting variable and find all the accordions on the page
const acc = document.getElementsByClassName( 'accordion' );
let i;

//Looping through each accordion
for ( i = 1; i <= acc.length; i++ ) {
    //Identify target for the event listener. In this case, a heading for each accordion, which I've numbered e.g. "title-1"
    const title = 'title-' + i;
    const label = document.getElementById( title );

    //Identify target content, in this case a list that has a unique ID e.g. "list-1"
    const listNum = 'list-' + i;
    const list = document.getElementById( listNum );
    //Add event listener to heading that toggles the active classes
    label.addEventListener( 'click', function() {
        label.classList.toggle( 'accordion--active' );
    });
}

Of course, there's more than one way to skin a cat, but this is a working example.

I have tracked the clicked event of each button and showed the corresponding hidden content with the use of data- attribute.

I have used vanilla JavaScipt instead of jQuery.

const buttons = document.querySelectorAll('.button');
const hiddens = document.querySelectorAll('.hidden');

buttons.forEach((btn) => {
  btn.addEventListener('click', btnClicked)
  
  function btnClicked(e) {    
    hiddens.forEach((hidden) => {
      if(e.target.dataset.btn == hidden.dataset.content) {
        hidden.classList.toggle('height')
      } else {
        hidden.classList.remove('height')
      }
    })
}
})

.hidden {
  background: #ccc;
  margin-top: 2%;
  padding-left:2%;
  overflow: hidden;
  transition: height 200ms;
  height: 0; /* <-- set this */
}

.hidden.height {
  height: 50px;
}

.button {
  padding: 10px;
  color: white;
  background-color: #2da6b5;
  border: none;
  margin-top: 5px;
  width:90%;
  margin-left: 5%;
  cursor: pointer;
}

.button:hover {
  filter: brightness(.9);
}

#row {
   display: flex;
}
.column {
  flex: 50%;
}

<div id="row">
  
<div class="column">
  <button class="button" data-btn="one">I am Button #1</button>
  <button class="button" data-btn="three">I am Button #3</button>
</div>

<div class="column">
  <button class="button" data-btn="two">I am Button #2</button>
  <button class="button" data-btn="four">I am Button #4</button>
</div>

</div>

 <div class="hidden" data-content="one">
  <p class="content"> So here I am #1</p>
</div>

 <div class="hidden" data-content="two">
  <p class="content"> So here I am #2</p>
</div>

<div class="hidden" data-content="three">
  <p class="content"> So here I am #3</p>
</div>

<div class="hidden" data-content="four">
  <p class="content"> So here I am #4</p>
</div>

Also, please do not use the same ID at multiple elements.