从动态元素中更改数字

Question

我有这个代码发送用户输入的值...信息和数字作为数组发送并推送到另一个数组，然后我在动态创建的列表元素和数字的跨度中显示文本元件...

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 = '<li class="lista">' + filmen + '<span class="betyg">'+ grade +'</span></li>';
        film_list.append(element);
        changeNumber();

}

最后我有一个函数，我想将span元素中的数字更改为数字显示的星号...这样可以正常工作，但仅适用于第一个创建的列表和span元素，当我尝试要添加更多的聆听，这个数字不会显示为星星，有人可以告诉我为什么会发生这种情况并指出我解决问题的方向吗？

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