I am trying to create Parent and Child rows of data in an HTML table. Currently the code works, but due to my unfamiliarity with JavaScript I am not always selecting the correct element. In the provided code, clicking the first parent only displays one child not both, and clicking the second parent only displays the first child of the first parent.

I'm 90% sure the error is in the JavaScript.

```js
var toggler = document.getElementsByClassName("parent");
var i;
for (i = 0; i < toggler.length; i++) {
  toggler[i].addEventListener("click", function() {
    this.parentElement.querySelector(".child").classList.toggle("active");
    this.classList.toggle("parent-down");
    this.parentElement.querySelector(".arrow").classList.toggle("arrow-down ");
  });
}
```

```css
.parent {
  cursor: pointer;
  user-select: none;
  /* Prevent text selection */
  font-size: 16px;
}

.arrow-down::before {
  -ms-transform: rotate(90deg);
  /* IE 9 */
  -webkit-transform: rotate(90deg);
  /* Safari */
  '
 transform: rotate(90deg);
}

.parent-down {
  border: 2px solid rgb(21, 67, 96);
  font-weight: bold;
}

/* Hide the child list */

.child {
  display: none;
  background-color: rgb(240, 250, 255);
  font-size: 14px;
}

.active {
  display: table-row;
}

.arrow::before {
  content: "\25B6";
  color: black;
  display: inline-block;
  margin-right: 6px;
}
```

```html
<table>
  <tr>
    <th>Word</th>
    <th>Number of Letters</th>
    <th>Do I like the word?</th>
  </tr>
  <tr class="parent">
    <td class="arrow">Long Words</td>
    <td>-</td>
    <td>-</td>
  </tr>
  <tr class="child">
    <td>Bamboozle</td>
    <td>9</td>
    <td>Yes.</td>
  </tr>
  <tr class="child">
    <td>Peritoneum</td>
    <td>10</td>
    <td>No.</td>
  </tr>
  <tr class="parent">
    <td class="arrow">Short Words</td>
    <td>-</td>
    <td>-</td>
  </tr>
  <tr class="child">
    <td>Squeak</td>
    <td>6</td>
    <td>Yes.</td>
  </tr>
</table>
```