Element Order Being Messed Up From After Moving Elements Twice

I'm making creating some Javascript code so that the overflowing menu links would move into a separate menu called more. The first time it is loaded, it works perfectly. However, w

Solution 1:

I rewrote your resize function to avoid for loops, most probably error is in the hoisting of your i's, and unless you are doing it for a specific reason you can avoid the fragment variable, find below the modified resize, works

      function resize() {
        const rChildren = rec.children;
        let numW = 0;

        [...rChildren].forEach(item => {
          item.outHTML = '';
          tele.appendChild(item);
        })  

        const teleW = tele.offsetWidth,
          tChildren = tele.children;

        [...tChildren].forEach(item => {
          numW += item.offsetWidth;

          if (numW > teleW) {
            item.outHTML = '';
            rec.appendChild(item);
          }
        });
      }

updated fiddle: https://jsfiddle.net/e34p0t6w/3/