JQuery: обновите только следующий div с определенным классом

У меня есть форма, которая отправляет событие jQuery .ajax каждый раз, когда значение меню изменяется. Функция jQuery запрашивает в базе данных цену продукта, а затем обновляет div с классом «.price» с результатом. На странице есть пять таких форм, и у каждой есть блок div с классом ".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);

      }
    });
});

Проблема, с которой я столкнулся, заключается в том, что функция обновляет все div с классом «.price», а не только следующим div. Я пробовал что-то вроде:

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

Но ничего не возвращает.

Ниже приведен пример HTML-формы:

<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>