Issue on getting id from Selected HTML elements from Ajax GET response with jQuery

Question

I am using ajax to display product data and then delete on click a specific on using the product id but am not able to get the product id as it is showing undefine can you guys suggest something.

In this code first I am getting the product details for the cart dropdown menu and then displaying it in list format with delete button through the first ajax and then on clicking delete should delete the element in the second ajax using the elements product id which I have saved inside data-r but on console, it showing undefined can anyone tell me what is the issue. As I know that the elements are created dynamically but I am not getting a solution

function TopCartVal() {

 // Used Route inside the ajax

  var url = "{{ route('pdt.details', ':id') }}";
  var yui = "{{ route('delete_fr.cart', ':id') }}";

// Ajax Structure

  $.getJSON( "{{ route('my.cart','json') }}", function( data ) {
       console.log(data);
       var Cart = $('#cart_dp_sec_pdt_desc');
       
      // Loop for data

       $.each(data, function(key , value) {
             console.log(value);
             url = url.replace(':id', value.product_id);
             yui = yui.replace(':id', value.product_id);
             Cart.append(`
                   <div class="row">
                      <div class="col-xs-4">
                          <div class="image">
                             <a href="`+url+`">
                               <img src="{{ asset('')}}`+value.image+`" alt=""/>
                             </a>
                          </div>
                      </div>
                      <div class="col-xs-7">
                          <h3 class="name">
                             <a href="`+url+`">`+value.product_name+`</a>
                          </h3>
                          <div class="price">`+value.currency+value.product_price+`</div>
                      </div>
                      <div class="col-xs-1 action">
                         <a href="#" 
                            data-r"`+value.id+`" 
                            class="cart_dp_btn_ctn_delete"> 
                            <i class="fa fa-trash"></i>
                         </a>
                      </div>
                    </div>
                      `);
      });
  });
}
// delete part
$(document).on('click', '.cart_dp_btn_ctn_delete', function(e){
   e.preventDefault();
   var id = $(this).attr('data-r'); // id of to be deleted element
   var yui = "{{ route('delete_fr.cart', ':id') }}";
   yui = yui.replace(':id', id);
   console.log(yui);
   console.log(id); // it is showing undefined`enter code here`
   // $.getJSON( yui, function(data){
   //     TopCartVal();
   // });
});

Answer 1

You are missing an = here:

data-r"`+value.product_id+`"

But using template literals correctly will make it easier to see

`<div class="row">
  <div class="col-xs-4">
    <div class="image">
      <a href="${url">
        <img src="{{ asset('')}}${value.image}" alt=""/>
      </a>
    </div>
  </div>
  <div class="col-xs-7">
    <h3 class="name">
      <a href="${url}">${value.product_name}</a>
    </h3>
    <div class="price">${value.currency+value.product_price}</div>
  </div>
  <div class="col-xs-1 action">
    <a href="#" data-r="${value.product_id}" class="cart_dp_btn_ctn_delete"> 
      <i class="fa fa-trash"></i>
    </a>
  </div>
</div>`