I'm trying to understand how to only trigger the function on the button being click - currently my code is applying it to all elements and only the first is changing innerTEXT

```js
var toggleInnerHTML = document.querySelectorAll(".toggleBtn");
  var desc = document.querySelectorAll('.description');

        for (i = 0; i < toggleInnerHTML.length; i++) {
          toggleInnerHTML[i].addEventListener('click', toggleText);
          var curText = toggleInnerHTML[i].innerText;
        }

        function toggleText() {
          for (i = 0; i < curText.length; i++) {
            if(this.innerText == curText[i]){
              toggleInnerHTML[i].innerText = "-";
            }
            else{
              toggleInnerHTML[i].innerText = curText[i];
            }
          }
            for (i = 0; i < desc.length; i++) {
              desc[i].classList.toggle('open');
            }

  }
```

```css
.description {
      display: none;
  }
  .description.open {
      display: block;
  }
```

```html
<div>
        <button class="toggleBtn">+</button>
        <div class="description">Text goes here</div>
</div>
<div>
        <button class="toggleBtn">+</button>
        <div class="description">Text goes here</div>
</div>
<div>
        <button class="toggleBtn">+</button>
        <div class="description">Text goes here</div>
</div>
```