When I refresh the page I got the questions in disorder - can you help me please?

This is mst files, when I refresh the page sometimes I got the first steps but some times I refresh the pages I can have step 2 or step 5 the files come in disorder and I want the files to be returned in order when I refresh the page.

init() {
    const list = [];
    const $this = this;
    const $files = [
      '/assets/js/template/steps/step_1.mst',
      '/assets/js/template/steps/step_2.mst',
      '/assets/js/template/steps/step_3.mst',
      '/assets/js/template/steps/step_4.mst',
      '/assets/js/template/steps/step_5.mst',
      '/assets/js/template/steps/step_6.mst',
      '/assets/js/template/steps/step_7.mst',
    ];

    $this.addLoading();
    $files.forEach(function (item) {
      list.push(
        fetch(item)
          .then((response) => response.text())
          .then((template) => {
            Mustache.parse(template);
            const output = Mustache.render(template, {});
            document
              .querySelector('.js-simulator-form')
              .insertAdjacentHTML('beforeend', output);
              // console.log(output);
          })
          .catch((error) =>
            console.log('Unable to get the template: ', error.message)
          )
          .finally(function () {
            return true;
          })
      );
      return true;
    });

    Promise.all(list).finally(function () {
      $this.run();
    });
  },
  run() {
    const $this = this;
    const $form = this.$item;