So I have this show/hide toggle button working to my liking.

I also managed to get the image icon - eye to change (open and close) when I toggle between hide/show details.

You see...? I have the value attribute of the button changing as I toggle the button itself.

Now, I have two different sections of text. I would like to toggle hide/show these sections of text individually.
BUT, when I toggle to 'hide' the text in brief -II, text in brief - I is hidden! yuck!
I tried giving them different ids and incorporated the changed ids into the script. It just doesn't work! HELP!

You could also [fiddle with my codepen.](https://codepen.io/headofclowns/pen/KKVOjZE) The issue I need help with is detailed there too.

```
<body>
  <h1>So many problems to solve</h1>

<div class="spec-proj-briefshowhide">
  <h2>Hello! this is the first problem. This is just the beginning to an unending greed.</h2>
 <div class="showhide-buttons-icons">
    <p><img id="opencloseeye" src="https://i.ibb.co/NjRDMFS/OPENEYE.png">
  <input type="button" value="Hide details" id="bt" onclick="toggle(this); changeImage();"></p>
</div>
<div style="display:flex;" id="proj-details">
<div class="smodpvproject-brief">
 <p>Brief - I:</p>
  <ul>
    <li>So I have this show/hide toggle button working to my liking.</li>
    <li>I also managed to get the eye to open and close when I toggle between hide/show details.</li>
    <li>You see..? I have the value attribute of the button changing as I click on it to toggle too.</li>
    <li>Now, I have two different sections of text. I would like to toggle hide/show these sections of text individually.</li>
    <li>For now, even if I toggle to hide the text for brief -II, text for brief - I is hidden.</li>
    <li>I tried giving them different ids and to incorporate it into the script. It just doesnt work for me.</li>
</ul>
</div>
</div>
</div>
<h2>Here comes the second issue of the evil eye and the sleepy eye.</h2>
  <div class="spec-proj-briefshowhide">
 <div class="showhide-buttons-icons">
    <p><img id="opencloseeye" src="https://i.ibb.co/NjRDMFS/OPENEYE.png">
  <input type="button" value="Hide details" id="bt" onclick="toggle(this); changeImage();"></p>
</div>
<div style="display:flex;" id="proj-details">
<div class="smodpvproject-brief">
 <p>Brief - II:</p>
  <ul>
    <li>The second issue is to incorporate the toggle feature to the eye(s).</li>
    <li>So when I click an open eye, I would like it to hide the text details and, simultaneously change the value of the adjacent button to 'Show details'.</li>
    <li>This should occur individually and for each section of text (meaning individually and seperately for Brief - I and Brief - II).</li>
    <li>I have a feeling that this would make it easy for people to visually recognise if the text is hidden or open.</li>
    <li>This hide/Show drama is to just save on screen real estate.</li>
    <li>Help needed!</li>
</ul>
</div>
</div>
</div>

</body>

```

```
body{
  margin:3em;
  background: #262626;
  color: #f7f7f2;
  font-family: Helvetica;
  font-size:0.8em;
  line-height:2;
  display:flex;
  flex-direction: column;
  justify-content:center;
  align-items:center;
}

.spec-proj-briefshowhide {
           display: flex;
           flex-direction: column;
           justify-content: center;
           align-items: center;
           padding-left: 3em;
           padding-right: 3em;
  border-bottom: 0.05em solid #f7f7f2;
       }

       .spec-proj-briefshowhide input {
           padding: 0.5em;
           color: #01BAEF;
           font-size: 0.8em;
           font-weight: 400;
           text-transform: uppercase;
           cursor: pointer;
           background-color: #262626;
           border: 0.05em solid #01BAEF;
           border-radius: 0.1em;
           outline: none;
       }

       .showhide-buttons-icons img {
           max-width: 3em;
           vertical-align: middle;
           padding-left: 2em;
           padding-right: 2em;
           align-self: flex-start;
       }

```

```
function toggle(ele) {
            var cont = document.getElementById('proj-details');
            if (cont.style.display == 'flex') {
                cont.style.display = 'none';

                document.getElementById(ele.id).value = 'Show details';
            } else {
                cont.style.display = 'flex';
                document.getElementById(ele.id).value = 'Hide details';
            }
        }

function changeImage() {
            var image = document.getElementById('opencloseeye');
            if (image.src.match("https://i.ibb.co/NjRDMFS/OPENEYE.png")) {
                image.src = "https://i.ibb.co/yPhD6HF/CLOSEEYE.png";
            } else {
                image.src = "https://i.ibb.co/NjRDMFS/OPENEYE.png";
            }
        }

```