Currently, I am working on creating a visualization of height bars with 40 randomly generated values similar to a sorting visualizer. I have implemented mergesort for sorting the values. Initially, when updating the DOM for the first time, I generated random values one by one in a loop and then updated them in the DOM using CSS heights.
However, I already have 40 sorted numbers in a list. So, my question is how can I update the DOM for each index to display the values using CSS height? You can refer to the image of the randomly generated numbers provided below to understand what I am aiming to achieve. In the case of random number generation, I could create them one by one. But with 40 pre-sorted values, I am struggling to figure out how to implement this for each index.
When I click the mergeSort button, the DOM gets cleared using .empty but then it fails to display anything or only shows the last sorted value for all 40 bars (e.g. 190 190 190...). How can I make sure that each index is displayed correctly and stop after they are sorted once?