I'm trying to update DOM with Sorted Numbers using css height bars

$(document).ready(function() 
{
setTimeout(function() { generate(); }, 50);
});
var random =[];
function generate()
{
    random.splice(0,random.length);
    $('.freqInner').empty();
    var i = 0;
    while (i < 10)
    {
    $('.freqInner').append('<div class="frequencyItem"></div>');
        i++;
    };
    $('.frequencyItem').each(function()
    {
    h = Math.floor(Math.random() * (200 - 5 + 1 )) + 5;
        random.push(h);
        $(this).css("height", h);
    });
}

In above code.. I'm creating Height bars with 40 Random valus(like Sorting visualizer). and i'm using mergesort for sorting so at the time of updating DOM first time i'm creating random values 1 by 1 in loop while updating it in DOM with CSS height... (image :- RadomNumberGeneratedImage)

//Sorted has Mergesort sorted values/numbers
Sorted = (mergeSort(list));
var i;
for(i=0;i<Sorted.length;i++)
{
    x = Sorted[i]
}
$('.freqInner').empty();
var i = 0;
while (i < 10)
{
   $('.freqInner').append('<div class="frequencyItem"></div>');
   i++;
};
$('.frequencyItem').each(function()
{
   x = Sorted[i];
   $(this).css("height", x);
});

But in this case i already have 40 Sorted Numbers in list so how can i update DOM for each index to print values in DOM using css height (see the below RadomNumberGeneratedImage to understand what i'm trying to do)... bcz in random number i'm creating it 1 by 1 but now i already have 40 values in list so i can't figure it out how to implement it for each index values.. whenever i click mergeSort button the DOM gets clear using .empty but then it's not showing anything or it will just shows the last Sorted value for all 40 bars (Ex: 190 190 190.....) instead of Sorted bars.. how can i show for each index and stop after once it Sorted..