You can use closest(".product__footer").find("h2") to get h2 tag value.

Demo Code :

$('.category__center').on('click', '.product__btn', (e) => {
  //get closest product footer then h2 text
  console.log($(e.target).closest(".product__footer").find("h2").text())
  console.log($(e.target).closest(".product").find('img').attr('src'))
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="category__container">
  <div class="category__center">
    <div class='product category__products'>
      <div class='product__header'>
        <img src="abc.png" />
      </div>
      <div class='product__footer'>
        <h2> Abs12</h2>
        <div class='product__price'>
          <h4>123 </h4>
        </div>
        <button type='button' class='product__btn'>Add To Cart</button>
      </div>
    </div>
    <div class='product category__products'>
      <div class='product__header'>
        <img src="deded.png" />
      </div>
      <div class='product__footer'>
        <h2> Abcd </h2>
        <div class='product__price'>
          <h4>12 </h4>
        </div>
        <button type='button' class='product__btn'>Add To Cart</button>
      </div>
    </div>
  </div>
</div>

Use a custom attribute with each product__btn like –

<button type='button' class='product__btn' data-product='".$doc["title"]."'>Add To Cart</button>

Now in the click event in jQuery, use –

$('.category__center').on('click' , '.product__btn' ,(e)=>{
  var productName = $(this).attr('data-product');
})

$(document).on("click",".product__btn", function(){
   let title = $(this).closest(".product__footer").find("> h2").text().trim();
   console.log(title);
});

I use php to fetch data from a mongodb database and display it as html elements . With jquery I want to click on a button on each item I have and get the element title of the clicked item and console.log it.

This is my product container with the created elements .

<div class="category__container">
          <div class="category__center">
            <?php 
                //get products and display them as html 
                $cursor = $collection->find();
              foreach ($cursor as $doc){
                echo 
                  " <div class= 'product category__products'>
                        <div class='product__header'>
                          <img src = ".$doc["image"]." />
                        </div>  
                        <div class= 'product__footer'>
                          <h2> ".$doc["title"]." </h2>                              
                          <div class= 'product__price'>
                              <h4> $".$doc["price"]." </h4>
                          </div>
                          <button type='button' class='product__btn'>Add To Cart</button>
                        </div>
                    </div>
                  ";

              }  

            ?>
          </div>
        </div>

My jquery event on document ready :

$('.category__center').on('click' , '.product__btn' ,(e)=>{
  //this is where I want to get the <h2> title from '.product__footer'
  

})

I would appreciate your help .