Jquery: Update only the next div with a specific class

Question

I have a form that submits a jQuery .ajax event every time menu's value is changed. The jQuery function queries the database for the price of an product, and then updates a div with a class of ".price" with the result. There are five of these forms on the page, and each one has a div with a class of ".price"

/* Variation Price Query */
$(".varSel").live("change", function(){
    var formdata = $(this).parents('form').serialize();
    $.ajax({
        type: "POST",
        url: "library/varPrice.php",
        data: formdata,
        success: function(html){
    $('.price').html(html);

      }
    });
});

The problem i am having is that the function updates all of the divs with the class of ".price" and not just the next div. I have tried something like:

$(this).next('div.price').html(html);

But it is not returning anything.

The following is an example of the html form:

<form name='addToCart' id='addToCart7' action='cart.php?action=add' method='post'>
<ul class='vars' id='varlist_p7'>
    <li><label for="Size">Size</label> 
    <select id="Size" name="Size" class='varSel'>
        <option>
            1oz
        </option>

        <option>
            4oz
        </option>

        <option>
            8oz
        </option>
    </select>
    </li>

    <li>
        <div class='price'>
            $ 3.00
        </div>
    </li>

    <li><input type='submit' class='buynow' value=''></li>
</ul>
</form>

Answer 1

since div.varSel and div.price are not siblings, you would have to go deeper than next()

$(this).parent().next("li:has(.price)").children(".price").html(html)

should work