Show / Hide button Selected lines

The question is how to make working Show/Hide button to selected lines ? In my code i make two section with 5 title. In one section i want hide Title 4 and 5 In two section i want hide Title 3,4,5 It works good one section 1 but section 2 is not

I tested it on getElementsByClassName, and other but cant make it work, so i leave this. At least one ID work :)

This is my code:

visible = false;
txt = document.getElementById("text");
btn = document.getElementById("btn");
function toggle() {
  if(visible) {
    visible = 0;
    btn.innerHTML = 'Show';
    txt.style.display = 'none';
  } else {
    visible = 1;
    btn.innerHTML = 'Hide';
    txt.style.display = 'block';
  }
}

.button {
background: lightblu;
padding: 0px;
}

.button {
  background-color: #04AA6D;
  border: none;
  color: white;
  padding: 1px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  font-family: 'Courier New', monospace;
  margin: 1px 1px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.button1 {
  background-color: white; 
  color: #2196F3; 
  border: px solid #04AA6D;
}

.button1:hover {
  background-color: #04AA6D;
  color: white;
}

<! --- First section. Working like I want 4 and 5 title is hiding and show, text on button is changing to Show and Hide -- >
<p><a href="Link" ="_blank"><span style="color: #717171;">> Title1</a>
<p><a href="Link" ="_blank"><span style="color: #717171;">> Title2</a>
<p><a href="Link" ="_blank"><span style="color: #717171;">> Title3</a>

<div id='text' style='display: none;'>
<p><a href="Link" ="_blank"><span style="color: #717171;">> Title4</a>
<p><a href="Link" ="_blank"><span style="color: #717171;">> Title5</a>
</div>

<button class="button button1"><span id='btn' onclick='toggle()'>Show</button>

<hr>
<! --- Two section. How make this section, work like first one ? Now i want hide Title 3,4,5 but dont know how make this ? -- >
<p><a href="Link" ="_blank"><span style="color: #717171;">> Title1</a>
<p><a href="Link" ="_blank"><span style="color: #717171;">> Title2</a>

<div id='text' style='display: none;'>
<p><a href="Link" ="_blank"><span style="color: #717171;">> Title3</a>
<p><a href="Link" ="_blank"><span style="color: #717171;">> Title4</a>
<p><a href="Link" ="_blank"><span style="color: #717171;">> Title5</a>
</div>

<button class="button button1"><span id='btn' onclick='toggle()'>Show</button>

You're using same id;s for both the buttons. Here is the updates code:

CSS:

.button {
      background-color: #04AA6D;
      border: none;
      color: white;
      padding: 1px 20px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 20px;
      font-family: 'Courier New', monospace;
      margin: 1px 1px;
      transition-duration: 0.4s;
      cursor: pointer;
    }

    .button1 {
      background-color: white; 
      color: #2196F3; 
      border: 1px solid #04AA6D;
    }

    .button1:hover {
      background-color: #04AA6D;
      color: white;
    }

Script:

 function toggle(button) {
    const textDiv = button.previousElementSibling;
    if (textDiv.style.display === 'none') {
      textDiv.style.display = 'block';
      button.innerText = 'Hide';
    } else {
      textDiv.style.display = 'none';
      button.innerText = 'Show';
    }
  }

<p><a href="Link" target="_blank"><span style="color: #717171;">> Title1</span></a></p>
<p><a href="Link" target="_blank"><span style="color: #717171;">> Title2</span></a></p>
<p><a href="Link" target="_blank"><span style="color: #717171;">> Title3</span></a></p>

<div class="toggle-text" style="display: none;">
  <p><a href="Link" target="_blank"><span style="color: #717171;">> Title4</span></a></p>
  <p><a href="Link" target="_blank"><span style="color: #717171;">> Title5</span></a></p>
</div>

<button class="button button1" onclick="toggle(this)">Show</button>

<hr>
 
<p><a href="Link" target="_blank"><span style="color: #717171;">> Title1</span></a></p>
<p><a href="Link" target="_blank"><span style="color: #717171;">> Title2</span></a></p>

<div class="toggle-text" style="display: none;">
  <p><a href="Link" target="_blank"><span style="color: #717171;">> Title3</span></a></p>
  <p><a href="Link" target="_blank"><span style="color: #717171;">> Title4</span></a></p>
  <p><a href="Link" target="_blank"><span style="color: #717171;">> Title5</span></a></p>
</div>