Find closest input and set value

Question

On select value change I want find closest input by class and change value.

JS

<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){

        $('#doc_service').on('change', function (){

            $.getJSON('\/services\/search-service', {id: $(this).val()}, function(data){

                $(this).closest('.price').val(data);

               //$('.price').val(data);


            });
        });
    });
</script>

My code $(this).closest('.price').val(data); not changing value, I try $('.price').val(data); it's work, but I have many input and want change value only one closest. Structure html is table

HTML

<tr>
    <td>
        <select id="doc_service">
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="mercedes">Mercedes</option>
            <option value="audi">Audi</option>
        </select>
    </td>
    <td>
        <input type="text" class="price">
    </td>
</tr>
<tr>
    <td>
        <select id="doc_service">
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="mercedes">Mercedes</option>
            <option value="audi">Audi</option>
        </select>
    </td>
    <td>
        <input type="text" class="price">
    </td>
</tr>

Answer 1

this in your code doesn't refer to the changed element, you should cache the object. Also note that closest method only selects the closest matching parent element.

$('#doc_service').on('change', function (){
    var _this = this;
    $.getJSON('\/services\/search-service', {id: this.value }, function(data) {
        $(_this).closest('td').next().find('.price').val(data);
    });
});

And IDs must be unique, $('#doc_service') only selects the first matching element, here classes should be used instead.