Jquery: Update only the next div with a specific class
<p>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"</p>

<pre><code>/* 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);

      }
    });
});
</code></pre>

<p>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:</p>

<pre><code>$(this).next('div.price').html(html);
</code></pre>

<p>But it is not returning anything.</p>

<p>The following is an example of the html form:</p>

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

        &lt;option&gt;
            4oz
        &lt;/option&gt;

        &lt;option&gt;
            8oz
        &lt;/option&gt;
    &lt;/select&gt;
    &lt;/li&gt;

    &lt;li&gt;
        &lt;div class='price'&gt;
            $ 3.00
        &lt;/div&gt;
    &lt;/li&gt;

    &lt;li&gt;&lt;input type='submit' class='buynow' value=''&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/form&gt;
</code></pre>
