Javascript: How to Target Elements within certain DIV?

JavaScript
1

I have two divs called “book__tile”. Each div has it’s own button. How do I use that button to target the p “hide” elements only within that div? The Javascript I wrote will change all the p tag with class “hide” elements on the page which is not what I wanted.

HTML:

<div class="books">
  
  <div class="book__tile">
        <div class="book__content">
            <p class="book__attribute hide"></p>
            <p class="book__attribute hide"></p>
        </div>
       <div class="book__footer">
            <button class="bttn" type="submit">submit</button>
        </div>
  </div>
  
  <div class="book__tile">
      <div class="book__content">
          <p class="book__attribute hide"></p>
          <p class="book__attribute hide"></p>
        </div>
        <div class="book__footer">
           <button class="bttn" type="submit">submit</button>
        </div>
   </div>
  
</div>

CSS:

.hide {
    display: none;
}

Javascript:

const allButtons = document.querySelectorAll('.bttn');

const showAttributes = document.querySelectorAll('.book__attributes');

const showText = () => {
        let allAttributes = [...document.querySelectorAll('.hide')]
        allAttributes.forEach(elem => elem.style.display = 'block');
    }

showAttributes.addEventListener('click', showText);
2

However, it would much easier to just give each book tile its own unique ID.

3

@DanCouper Brother, I will try that. That you for your help. The problem about adding an ID is that the database does a random query every time the page loads. I would not be able to add an ID tag.