List Jumping Example - Vanilla JS

HTML

<div id="app">
  <ul class="not_done" id="list">
    <li id="item_1" class="item_1">1</li>
    <li id="item_2" class="item_2">2</li>
    <li id="item_3" class="item_3">3</li>
    <li id="item_4" class="item_4">4</li>
    <li id="item_5" class="item_5">5</li>
    <li id="item_6" class="item_6">6</li>
    <li id="item_7" class="item_7">7</li>
    <li id="item_8" class="item_8">8</li>
    <li id="item_9" class="item_9">9</li>
    <li id="item_10" class="item_10">10</li>
    <li id="item_11" class="item_11">11</li>
    <li id="item_12" class="item_12">12</li>
    <li id="item_13" class="item_13">13</li>
    <li id="item_14" class="item_14">14</li>
    <li id="item_15" class="item_15">15</li>
    <li id="item_16" class="item_16">16</li>
    <li id="item_17" class="item_17">17</li>
    <li id="item_18" class="item_18">18</li>
    <li id="item_19" class="item_19">19</li>
    <li id="item_20" class="item_20">20</li>
  </ul>
</div>

CSS

ul {
  overflow-anchor: none;
}

li {
  padding: 30px 5px;
  text-align: center;
  border-bottom: 1px solid #000;
}

li.item_10 {
  background-color: #ff0;
}

.done {
  border: 4px solid #f00;
}

.not_done {
  border: 4px solid #00f;
}

JavaScript 1.7

const insertBefore = (child, beforeChild) => {
  const list = document.getElementById('list')
  const childEl = document.getElementById('item_' + child)
  const beforeChildEl = document.getElementById('item_' + beforeChild)
  list.insertBefore(childEl, beforeChildEl)
}

const update = () => {
  const list = document.getElementById('list')
  list.className = 'done'
  insertBefore(1, 11)
  insertBefore(2, 11)
  insertBefore(3, 11)
  insertBefore(4, 11)
  insertBefore(5, 11)
  insertBefore(6, 11)
  insertBefore(7, 11)
  insertBefore(8, 11)
  insertBefore(9, 11)
}

window.setTimeout(update, 5000)