JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <ul>
        <li>
          <a class="add-to-cart" href="#" data-name="Apple" data-id="1" data-price="1.22" >Apple $1.22</a>
          <button onclick="myFunction(this)" data-id="1">Try it</button>
        </li>
        <li>
          <a class="add-to-cart" href="#" data-name="Banana" data-id="2" data-price="1.33">Banana $1.33</a>
          <button onclick="myFunction(this)" data-id="2">Try it</button>
        </li>
        <li><a class="add-to-cart" href="#" data-name="Shoe" data-id="3" data-price="22.33">Shoe $22.33</a><button onclick="myFunction(this)" data-id="3">Try it</button></li>
        <li><a class="add-to-cart" href="#" data-name="Frisbee" data-id="4" data-price="5.22">Frisbee $5.22</a><button onclick="myFunction(this)" data-id="4">Try it</button></li>
    </ul>
</div>

JavaScript

function myFunction(callingElement) {
		var data_id = $(callingElement).attr('data-id');    
    var x = $(".add-to-cart[data-id *= "+data_id+" ]").attr('data-name');
    
    alert(x);
    document.getElementById("show-fav").innerHTML = x;
}