change numbers from dynamic elements
<p>I have this code that sends the values a user have typed in... the information and numbers are sent as an array and pushed into another array, I then display the text in a dynamically created list element and number in a span element...</p>

<pre><code>var button = $('#add');
    button.click(function() 
    {
        var filmnamn = $('#name');
        var filmnamnet = filmnamn.val();
        var betyg = $('#star');
        var betyget = betyg.val();
        betyget = Number(betyget);

        if(filmnamnet == 0)
        {
            $('#name').css('background-color', 'red');

        }
        if(betyget == 0)
        {
            $('#star').css('background-color', 'red');

        }
        if(betyget == 0 || filmnamnet == 0)
        {
            alert("Vänligen fyll i fälten korrekt");

        }
        else
        {
            var array = new Array();
            array.unshift(betyget);
            array.unshift(filmnamnet);
            film_array.unshift(array);
            betyg_array.unshift(array);
            updateFilmList();

        }

    });



    var film_list = $("#filmlista");
    var film_array = new Array();

function updateFilmList()
{
        document.getElementById("name").value = '';
        document.getElementById("star").value = 0;
        var filmen = film_array[0][0];
        var grade = film_array[0][1];
        var element = '&lt;li class="lista"&gt;' + filmen + '&lt;span class="betyg"&gt;'+ grade +'&lt;/span&gt;&lt;/li&gt;';
        film_list.append(element);
        changeNumber();

}
</code></pre>

<p>And at last I have the function that i want to change the number in the span element to the amount of stars that the number shows... this works fine but only for the first created list and span element, when I try to add more listelements the number wont show up as stars, can someone tell me why this happens and point me in the direction to fix the problem?</p>

<pre><code>function changeNumber(){
    var elements= document.getElementsByClassName("betyg");    
    for (var i=0; i&lt;elements.length; i++) {                     
        var element = elements[i];
        var length = parseInt(element.innerHTML);
        var x=Array(length+1).join("*");
        element.innerHTML=x;
    }
}
</code></pre>
