pass a referenced parent div id to js function through onclick attribute

Question

i want to get the element of a child div from a SPECIFIC parent div. my div may have the same id which is id="petAttribute. what im going to do is iterate through a list of pet details, store their information in a card and when i click the button IN the card, it will alert the content of that particular card.

the problem in my code was, i successfully prompt the name of the pet, but when i click on a different card, it does not prompt the name from the card that i clicked.

function pet(){
    
    let petAttribute = document.getElementById("petAttribute").children;

    let petname = petAttribute[0].innerHTML;

    alert(petname);
  }

* {
    box-sizing: border-box;
  }
  
  body {
    font-family: Arial, Helvetica, sans-serif;
  }
  
  /* Float four columns side by side */
  .column {
    float: left;
    width: 25%;
    padding: 0 10px;
  }
  
  /* Remove extra left and right margins, due to padding */
  .row {margin: 0 -5px;}
  
  /* Clear floats after the columns */
  .row:after {
    content: "";
    display: table;
    clear: both;
  }
  
  /* Responsive columns */
  @media screen and (max-width: 600px) {
    .column {
      width: 100%;
      display: block;
      margin-bottom: 20px;
    }
  }
  
  /* Style the counter cards */
  .card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    padding: 16px;
    text-align: center;
    background-color: #f1f1f1;
  }
  img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 1px solid black;
  }
  .button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 3px 3px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 2px 2px;
    cursor: pointer;
  }

h2>Choose your pet to groom</h2>

<div class="row">
  <div class="column">
    <div class="card" id="petcard">
    <img src="https://logowik.com/content/uploads/images/t_cat8600.jpg" alt="Paris" width="300" height="300">
      <div id = "petAttribute">
      <div id="name">Nomi</div>
      <div id="breed">Domestic Long Hair</div>
      <div id="age">Adult</div>
    </div>
      <input type="button" class="button" value="Groom my pet"  onclick="pet()">
    
    </div>
  </div>

  <div class="row">
  <div class="column">
    <div class="card" id="petcard">
    <img src="https://logowik.com/content/uploads/images/t_cat8600.jpg" alt="Paris" width="300" height="300">
      <div id="petAttribute">
      <div id="name">kuchi</div>
      <div id="breed">Domestic short Hair</div>
      <div id="age">kitten</div>
      </div>
      <input type="button" class="button" value="Groom my pet" onclick="pet()">
    </div>
  </div>

Answer 1

First of all, IDs should be unique. The getElementById method always returns the first element with the desired ID. (That's why you always get the first name, no matter which button you click.) So you'd better use classes:

<h2>Choose your pet to groom</h2>

<div class="row">
    <div class="column">
        <div class="card petcard">
            <img src="https://logowik.com/content/uploads/images/t_cat8600.jpg" alt="Paris" width="300" height="300">
            <div class="petAttribute">
                <div class="name">Nomi</div>
                <div class="breed">Domestic Long Hair</div>
                <div class="age">Adult</div>
            </div>
            <input type="button" class="button" value="Groom my pet">
        </div>
    </div>
</div>

<div class="row">
    <div class="column">
        <div class="card petcard">
            <img src="https://logowik.com/content/uploads/images/t_cat8600.jpg" alt="Paris" width="300" height="300">
            <div class="petAttribute">
                <div class="name">kuchi</div>
                <div class="breed">Domestic short Hair</div>
                <div class="age">kitten</div>
            </div>
            <input type="button" class="button" value="Groom my pet">
        </div>
    </div>
</div>

Second, if you don't pass any information to the function that is supposed to print the name, you need at least information about which button was clicked. Then you can navigate from this button directly to the element that contains the name. One way to do this is the following:

document.querySelectorAll("input.button").forEach(button => {
    button.addEventListener("click", function() {
        let petAttribute = button.parentElement.querySelector(".petAttribute");
        let petname = petAttribute.querySelector(".name").textContent;
        alert(petname);
    });
});