James_63 0 Newbie Poster

I got two dropdowns in each product in my cart. When i select my both option my class on success is not updating the cost. It only updates when i refresh the page, i dont want to refresh my page to get the cost. this is my script...

$(document).ready(function() {

  $('.fabric, .size').on('change', sendData);

  function sendData() {

  var id = $(this).data("id");
  var fabricID = $('.fabric[data-id=' + id +']').val(); 
  var sizeID   = $('.size[data-id=' + id +']').val();

    if ( fabricID !== "" && sizeID !== "") {
      $.ajax({
            type     : 'GET',
            url      : 'calculates.php',
            dataType : 'json',
            data     : {
                prod_id:id,
                fabric_id: fabricID,
                size_id: sizeID
            }
        }).done(function(data) {
            $('.cost' + id).text(data.val);
            $('.subtotal' + id).load(data.val);
         });
      }
  }

});

this is where i am trying to update when user select his product options

<td class="product'.$id.'">'.$value.'</td> <td class="cost" data-id="'.$id.'">R$: '.$_SESSION['icms'.$id].'</td> <td class="subtotal"  data-id="'.$id.'">R$: '.$value * $_SESSION['icms'.$id] .'</td>

My $value holds the quantity of my product. And other problem that i'm getting is when i click in my plus and remove button,i don't get my subtotal to updated either.

And this script handles my $value to keep updating when i click on my button.

$('.actions').click(function(e){
  e.preventDefault();
  var action = $(this).attr('data-action'); 
  var id = $(this).attr('product_id');
  var cost_id = $(this).data("id");

  console.log("triggered action " + action + " for product " + id); //debugging
  $.ajax({
    url: 'cart_functions.php',
    type : 'GET',
    data: {action:action,prod_id:id},
    dataType: 'json',
    success: function(data)
    {
      console.log("ajax call returned the following: " + JSON.stringify(data)); //debugging
      if (data.result == "success") {
        if (action == "plus" || action == "remove")
        {
          console.log("identified product td for " + id + ": " + $(".product" + id).length); //debugging
          $(".product" + id).text(data.val);
          $(".subtotal" + cost_id).text(data.val);
          //update the UI with the new total
        }

So as you can see i used in both scripts my class subtotal. So it can update when i click in my plus or remove button and on dropdown selection changes the subtotal and the cost for each product. Why my jquery is not updating my cost and subtotal?
Im still a noob at jquery. Please some help.