<ul id="songQueue">
  <li style="view-transition-name: t-001;">
    <div class="meta">
      <p class="song">Electric Raincoat</p>
      <p class="artist">Neon Skyline</p>
    </div>
    <div class="buttons">
      <button onclick="moveUp(this.parentElement)">↑</button>
      <button onclick="moveDown(this.parentElement)">↓</button>
      <button class="delete-btn">
        <img src="https://upload.wikimedia.org/wikipedia/commons/7/7d/Trash_font_awesome.svg" alt="">
      <span class="sr-only">Delete</span>
    </button>
    </div>
  </li>
  <li style="view-transition-name: t-002">
      <div class="meta">
      <p class="song">Rusty Jones Ballad</p>
      <p class="artist">Anything</p>
    </div>
    <div class="buttons">
      <button onclick="moveUp(this.parentElement)">↑</button>
      <button onclick="moveDown(this.parentElement)">↓</button>
      <button class="delete-btn">
        <img src="https://upload.wikimedia.org/wikipedia/commons/7/7d/Trash_font_awesome.svg" alt="">
      <span class="sr-only">Delete</span>
    </button>
    </div>
  </li>
  <li style="view-transition-name: t-003">
      <div class="meta">
      <p class="song">Pixelated</p>
      <p class="artist">Glitch</p>
    </div>
    <div class="buttons">
      <button onclick="moveUp(this.parentElement)">↑</button>
      <button onclick="moveDown(this.parentElement)">↓</button>
      <button class="delete-btn">
        <img src="https://upload.wikimedia.org/wikipedia/commons/7/7d/Trash_font_awesome.svg" alt="">
      <span class="sr-only">Delete</span>
    </button>
    </div>
  </li>
   <li style="view-transition-name: t-004">
      <div class="meta">
      <p class="song">Under the Neon Moon</p>
      <p class="artist">Midnight Echo</p>
    </div>
    <div class="buttons">
      <button onclick="moveUp(this.parentElement)">↑</button>
      <button onclick="moveDown(this.parentElement)">↓</button>
      <button class="delete-btn">
        <img src="https://upload.wikimedia.org/wikipedia/commons/7/7d/Trash_font_awesome.svg" alt="">
      <span class="sr-only">Delete</span>
    </button>
    </div>
  </li>
   <li style="view-transition-name: t-005">
      <div class="meta">
      <p class="song">Can't Catch My Shadow</p>
      <p class="artist">Silver Spectre</p>
    </div>
    <div class="buttons">
      <button onclick="moveUp(this.parentElement)">↑</button>
      <button onclick="moveDown(this.parentElement)">↓</button>
      <button class="delete-btn">
        <img src="https://upload.wikimedia.org/wikipedia/commons/7/7d/Trash_font_awesome.svg" alt="">
      <span class="sr-only">Delete</span>
    </button>
    </div>
  </li>
   <li style="view-transition-name: t-006">
      <div class="meta">
      <p class="song">Space Serenade</p>
      <p class="artist">Stardust Slim</p>
    </div>
    <div class="buttons">
      <button onclick="moveUp(this.parentElement)">↑</button>
      <button onclick="moveDown(this.parentElement)">↓</button>
      <button class="delete-btn">
        <img src="https://upload.wikimedia.org/wikipedia/commons/7/7d/Trash_font_awesome.svg" alt="">
      <span class="sr-only">Delete</span>
    </button>
    </div>
  </li>
  <li style="view-transition-name: t-007">
      <div class="meta">
      <p class="song">Dinosaur Heart</p>
      <p class="artist">Oh me oh my</p>
    </div>
    <div class="buttons">
      <button onclick="moveUp(this.parentElement)">↑</button>
      <button onclick="moveDown(this.parentElement)">↓</button>
      <button class="delete-btn">
        <img src="https://upload.wikimedia.org/wikipedia/commons/7/7d/Trash_font_awesome.svg" alt="">
      <span class="sr-only">Delete</span>
    </button>
    </div>
  </li>
  <li style="view-transition-name: t-008">
      <div class="meta">
      <p class="song">Where we go</p>
      <p class="artist">River Dune</p>
    </div>
    <div class="buttons">
      <button onclick="moveUp(this.parentElement)">↑</button>
      <button onclick="moveDown(this.parentElement)">↓</button>
      <button class="delete-btn">
        <img src="https://upload.wikimedia.org/wikipedia/commons/7/7d/Trash_font_awesome.svg" alt="">
      <span class="sr-only">Delete</span>
    </button>
    </div>
  </li>
</ul>
ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 500px;
}

li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  background: #ddd;
  padding: 0 0.5rem;
}

.meta p {
  line-height: 0
}

.song {
  font-size: 120%;
}

.buttons {
  display: flex;
  gap: 0.5rem;
}

button {
  width: 2rem;
  height: 2rem;
  border: none;
  padding: none;
}

button img {
  height: 100%;
  width: 100%;
  aspect-ratio: 1;
}

body {
  font-family: system-ui;
  padding: 1rem;
}

.sr-only {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

ul {
  padding: 0;
}
function moveUp(btnElement) {
    const listItem = btnElement.parentElement;
    const prevListItem = listItem.previousElementSibling;
    
    if (prevListItem) {
      document.startViewTransition(() => {
        listItem.parentNode.insertBefore(listItem, prevListItem);
      })
    }
}

function moveDown(btnElement) {
    const listItem = btnElement.parentElement;
    const nextListItem = listItem.nextElementSibling;

    if (nextListItem) {
      document.startViewTransition(() => {
        listItem.parentNode.insertBefore(nextListItem, listItem);
      });
    }
}

document.querySelectorAll('.delete-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    document.startViewTransition(() => {
      btn.closest('li').remove();
    });
  })
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.