<h1>Click on list item to change its position</h1>
<div class="wrapper">
  <div class="container">
    List 1
    <ul class="one">
      <li>List Item1</li>
      <li>List Item2</li>
      <li>List Item3</li>
    </ul>
  </div>
  <div class="container">
    List 2
    <ul class="two">
      <li>List Item A</li>
      <li>List Item B</li>
      <li>List Item C</li>
    </ul>
  </div>
    <div class="container">
    List 3
    <ul class="three">
      <li>List Item A</li>
      <li>List Item B</li>
      <li>List Item C</li>
    </ul>
  </div>
    <div class="container">
    List 4
    <ul class="four">
      <li>List Item A</li>
      <li>List Item B</li>
      <li>List Item C</li>
    </ul>
  </div>
    <div class="container">
    List 5
    <ul class="five">
      <li>List Item A</li>
      <li>List Item B</li>
      <li>List Item C</li>
    </ul>
  </div>
</div>

.inside {
  list-style-position: inside;
}

.two {
  list-style-type: square;
}

.three {
  list-style-type: upper-roman;
}

.four {
  list-style-type: georgian;
}

.five {
  list-style-image: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/82eb619d-9a12-4ef9-8d6d-3bae2b93b9a8/da6hce-84488159-e547-4596-9af3-156d2f797946.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzgyZWI2MTlkLTlhMTItNGVmOS04ZDZkLTNiYWUyYjkzYjlhOFwvZGE2aGNlLTg0NDg4MTU5LWU1NDctNDU5Ni05YWYzLTE1NmQyZjc5Nzk0Ni5naWYifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.nczbvKiXcVx_lOxy1TqbJ8MzDwd9rrEscnvBJRpjpnA");
}

html {
  color-scheme: dark;
  font-size: 20px;
}

body {
  background: #292929;
  color: #DFDFDF;
  display: flex;
  align-items: center;
  justify-items: center;
  flex-direction: column;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-items: center;
  flex-direction: row;
}

h1 {
  margin-bottom: 3rem;
  color: #DC89F5;
}

.container {
  margin-right: 1.5rem;
}

li {
  cursor: pointer;
}

var li = document.querySelectorAll("li");


for (var i = 0; i < li.length; ++i) {
    li[i].addEventListener('click', toggleClasses);
}
function toggleClasses() {
    this.classList.toggle('inside');
}