使用Ajax的跨度值

Hello i try to display a price form an AJAX call, i putted an input just to check if you get the price and it's work but i can't display the price result on a span.

{{$product->price}} have default value but it's change depending the size, i would like to display the result also in the space and hide the input.

someone knows how to do that ?

Here my html :

<input type="text" placeholder="{{$product->price}}"value="{{$product->price}}">
  <div id="price">
    <span class="text-muted text-normal" id="price"> {{$product->price}}€</span>
  </div>
<input type="hidden" name="price" id="price" value="{{$product->price}}" />

Here my javascript :

<script>
  $('#size').change(function () {

    $.ajax({
        type: 'GET',
        url : '../{{$product->id}}/ballons-entrainement/size-price',
        dataType: "json",
        data : {
            size : document.getElementById('size').value
        },

        success:function(data){
            console.log(data);
            $('input').attr('value', data.price);
        }
    });
  });
</script>

You try with .html() like

<script>
  $('#size').change(function () {
    $.ajax({
        type: 'GET',
        url : '../{{$product->id}}/ballons-entrainement/size-price',
        dataType: "json",
        data : {
            size : document.getElementById('size').value
        },
        success:function(data){
            $('span#price').html( data.price );
        }
    });
  });
</script>