JSFiddle - React, Tailwind, and code Playground

by schinckel

HTML

<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<ul id="conditions">

  <li data-position_a="1"
      data-position_b="1">
    Regular Hours
    <code>1.0</code>
  </li>
  
  <li data-position_a="2"
      data-position_b="1">
    Saturday
    <code>2.0</code>
  </li>

  <li data-position_a="3"
      data-position_b="1">
    Sunday
    <code>3.0</code>
  </li>

</ul>

<div id="output">Ready</div>

JavaScript

function save(event) {
	const current = event.item;
  const previous = current.previousElementSibling;
  const next = current.nextElementSibling;
  
  if (previous == null && next == null) {
    // This is the only item in the list.
    current.dataset.position_a = 1;
    current.dataset.position_b = 1;
  } else if (previous == null) {
    // This is the first item in the list.
    current.dataset.position_a = next.dataset.position_a;
    current.dataset.position_b = Number(next.dataset.position_b) + 1;
  } else if (next == null) {
    // This is the last item in the list.
    current.dataset.position_a = Number(previous.dataset.position_a) + 1;
    current.dataset.position_b = previous.dataset.position_b;
  } else {
    // This is neither first nor last.
    current.dataset.position_a = Number(next.dataset.position_a) +
                                 Number(previous.dataset.position_a);
    current.dataset.position_b = Number(next.dataset.position_b) +
                                 Number(previous.dataset.position_b);
  }
  
  current.querySelector('code').innerHTML = Number(current.dataset.position_a) / Number(current.dataset.position_b);
  
  document.getElementById('output').innerHTML = current.dataset.position_a + '/' + current.dataset.position_b;
}

const s = Sortable.create(document.getElementById('conditions'), {onUpdate: save});