Тут фишка в том что нужно было заранее планировать как ты будешь очищать содержимое узла. Иногда невозможно решить задачу не сделав шаг назад и не пересмотрев уже существующую реализацию.
Вот в этой строке document.getElementById('text-area').innerHTML += sortn + '<br>'; в переменной sortn - массив. А логика строки - “возьми какой есть innerHTML у узла и сконкатенируй с ним содержимое массива”. Тут js пытается автоматом привести массив к строке, и алгоритм по умолчанию - сконкатенировать элементы массива символом запятой. Результат ты наблюдаешь.
Теперь по поводу подхода
Всегда хорошая стратегия разделять данные от представления.
В твоем случае данные - это массив строк. Представление - это то как этот массив отображается на странице.
Добавление элемента означает что ты
- Добавляешь элемент в массив
- Вызываешь функцию отрисовки данных на странице
Сортировка означает что
- Берешь массив с данными (он будет храниться так же как
firstArrв твоем примере). - Сортируешь его
- Вызываешь функцию отрисовки данных
Теперь по функции отрисовки. Ее задача - каким бы ни было состояние firstArr, вывести его на страницу. Если в нем 1 элемент, то отрисуется 1 штка, если в массив добавить еще элемент, то после вызова отрисовки отрисуется 2 итд. Самая простая стратегия для функции отрисовки - это очистить узел куда отрисовываются данные и отрисовать все заново.
Это подсказывает как тебе быть дальше?