Duplicate <li> elements are added to DOM on every click

[horstvanbommel]

Every click on the switch appends a new li element to the the generated ul.option-list.

It would be better to reuse an element if it already exists in the list and just shuffle its position.

<ul class="option-list" style="-webkit-transform: translate3d(0px, -735px, 0px);">
  <li style="line-height: 21px;">Public</li>
  <li style="line-height: 21px;">Private</li>
  <li style="line-height: 21px;">Draft</li>
  <li style="line-height: 21px;">Scheduled</li>
  <li style="line-height: 21px;">Public</li>
  <li style="line-height: 21px;">Private</li>
  <li style="line-height: 21px;">Draft</li>
  <li style="line-height: 21px;">Scheduled</li>
  <li style="line-height: 21px;">Public</li>
  <li style="line-height: 21px;">Private</li>
  <li style="line-height: 21px;">Draft</li>
  <li style="line-height: 21px;">Scheduled</li>
  <li style="line-height: 21px;">Public</li>
  <li style="line-height: 21px;">Private</li>
  <li style="line-height: 21px;">Draft</li>
  <li style="line-height: 21px;">Scheduled</li>
  <li style="line-height: 21px;">Public</li>
  <li style="line-height: 21px;">Private</li>
  <li style="line-height: 21px;">Draft</li>
  <li style="line-height: 21px;">Scheduled</li>
  <li style="line-height: 21px;">Public</li>
  <li style="line-height: 21px;">Private</li>
  <li style="line-height: 21px;">Draft</li>
  <li style="line-height: 21px;">Scheduled</li>
  <li style="line-height: 21px;">Public</li>
  <li style="line-height: 21px;">Private</li>
  <li style="line-height: 21px;">Draft</li>
  <li style="line-height: 21px;">Scheduled</li>
  …
</ul>