$(document).ready(function() {

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

  function sendData() {
   //use the data-id attribute of the selected element to match the correct elements
   var id = $(this).data("id");
    var action = $(this).attr('data-action');
    var fabricID = $('.fabric[data-id=' + id +']').val();
    var sizeID   = $('.size[data-id=' + id +']').val();
    var url = 'checkout.php';

    if ( fabricID !== "" && sizeID !== "") {
      $.ajax({
            type     : 'GET',
            url      : 'calculates.php',
            dataType : 'json',
            data     : {
                prod_id:id,
                fabric_id: fabricID,
                action:action,
                size_id: sizeID
            }
        }).done(function(data) {
          console.log(data);

           /*$('.cost[data-id=' + id + ']').html('R$:' + data);
           $('.subtotal[data-id=' + id + ']').html('R$:' + data);*/
          $('.cost[data-id=' + id + ']').html('R$:' + data.cost);
           $('.subtotal[data-id=' + id + ']').html('R$:' + data.subtotal);




        });
      }
  }
});