I want each div of the same class to choose their children

Question

I have 2 div and they have the same class "meal". When I press the add button in the second div, it chooses the first title of the first div I want each div of the same class to choose their children

 let meal = document.querySelector(".meal"); let tit = meal.childNodes[3]; $(".btnAdd").on("click", function() { console.log(tit.innerText); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="meal"> <img src="" height="250" width="500" class="mealImg"> <h4 class="title">Title</h4> <button class="btnAdd">Add</button> <i class="far fa-heart" id="favIcn"></i> </div> <div class="meal"> <img src="" height="250" width="500" class="mealImg"> <h4 class="title">Title</h4> <button class="btnAdd">Add</button> <i class="far fa-heart" id="favIcn"></i> </div>

Answer 1

Since you're already using jQuery, why not use it across the board and leverage the use of siblings() ?

 $('.btnAdd').on('click', function() { console.log($(this).siblings('.title').text()); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="meal"> <img src="" height="250" width = "500" class="mealImg"> <h4 class = "title">Title</h4> <button class="btnAdd">Add</button> <i class="far fa-heart" id="favIcn"></i> </div> <div class="meal"> <img src="" height="250" width = "500" class="mealImg"> <h4 class = "title">Title 2</h4> <button class="btnAdd">Add</button> <i class="far fa-heart" id="favIcn"></i> </div>