How can i append javascript object data to element ID?

Hi I have a ajax call that returns some data from my controller. But i cant seem to append this data to TD elements. I get no errors in my console so im not sure how i can do this. Any ideas what im doing wrong?

Here is the javascript object

{purchased: "5", new_balance: 77, sub_total: 1750, tax: 1977.4999999999998, grand_total: 3727.5}

This is my ajax call/response handle

jQuery(document).ready(function(){
    jQuery('#ajaxSubmit').click(function(e){
       e.preventDefault();
       $.ajaxSetup({
          headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          }
      });
       jQuery.ajax({
          url: "{{ url('checkout/post') }}",
          method: 'post',
          dataType: 'json',
          data: {
             order_quantity: jQuery('#order_quantity').val()
          },
          success: function(result){
            
            console.log(result);
            jQuery("#purchased").val(result.purchased);
            jQuery("#new_balance").val(result.new_balance);
            jQuery("#sub_total").val(result.sub_total);
            jQuery("#tax").val(result.tax);
            jQuery("#grand_total").val(result.grand_total);
            
          }});
       });
    });

And these are my elements

                              <th>Purchased:</th>
                               <td id="purchased"> </td>
                               </tr>

                              <tr>
                              <th>New Balance:</th>
                               <td id="new_balance"> </td>
                               </tr>

                                   <tr>
                              <th>Sub Total:</th>
                               <td id="sub_total"> </td>
                               </tr>

                                   <tr>
                              <th>Tax ({{$tax}}):</th>
                               <td id="tax"> </td>
                               </tr>

                                   <tr>
                              <th>Grand Total:</th>
                               <td id="grand_total"> </td>
                               </tr>