Change recipe ingredients as serving changes

Question

i am working on a recipe site (which is almost finished except this problem) on a single recipe page, i have recipe serving input field and recipe ingredients.

My question is that using jquery i want to change recipe ingredients dynamically if the serving changes

i have seen a similar closed threat, but it did not help me my exact code will look like this

            Serving: <input type="text" name="serving" class="serving" value="5"/> persons 

            <h3>ingredients</h3>
            <ul class="ingredients">
            <li class="ingredient">
            <span class="amount">1</span> cups
            <span class="name"><a href="http://www.mysite.com/ingredient/yogurt/">yogurt</a></span> 
            </li>

            <li class="ingredient">
            <span class="amount">2</span> tbsp
            <span class="name"><a href="http://www.mysite.com/ingredient/yogurt/">chillies</a></span> 
            </li>

            <li class="ingredient">
            <span class="amount">3</span> pieces
            <span class="name"><a href="http://www.mysite.com/ingredient/yogurt/">butter</a></span> 
            </li>
            </ul>

i would highly appreciate any help on this to get me finish my pending site

Regards

Answer 1

Try this: http://jsfiddle.net/vansimke/tLWpr/