JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
  <div class="one">
    <ul id="one">
      <li>Пункт 1</li>
      <li>Пункт 2</li>
      <li>Пункт 3</li>
      <li>Пункт 4</li>
      <li>Пункт 5</li>
      <li>Пункт 6</li>
    </ul>
  </div>
  <div class="two">
    <ul id="two">
      <li>Пункт 1</li>
      <li>Пункт 2</li>
      <li>Пункт 3</li>
      <li>Пункт 4</li>
      <li>Пункт 5</li>
      <li>Пункт 6</li>
    </ul>
  </div>
  <div class="button">
    <a class="left" href="#">&#171;</a>
    <a class="right" href="#">&#187;</a>
  </div>
  <div class="three">
    <ul id="three">
      <li>Пункт 1</li>
    </ul>
  </div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

CSS

#container {
  margin: 40px auto;
  padding: 20px;
  width: 600px;
  height: auto;
  background: #24a2dd;
  overflow: hidden;
}
.one {
  margin-bottom: 40px;
  padding: 20px;
  background: #e9e9e9;
  border: 1px solid #000;
  text-align: left;
}
.two {
  float: left;
  padding: 20px;
  width: 208px;
  background: #e9e9e9;
  border: 1px solid #000;
  text-align: left;
}
.three {
  float: left;
  padding: 20px;
  width: 208px;
  background: #e9e9e9;
  border: 1px solid #000;
  text-align: left;
}
.button {
  float: left;
  width: 100px;
}
  .left,
  .right {
    display: block;
    margin: 40px auto;
    width: 30px;
    height: 30px;
    line-height: 30px;
    background: #fff;
    border: 1px solid #000;
    text-decoration: none;
    text-align: center;
  }

  #one,
  #two,
  #three {
    margin: 0px;
    padding: 0px;
    list-style: none;
  }
  #one li,
  #two li,
  #three li {
    display: block;
    margin-bottom: 5px;
    padding: 2px 8px;
    background: #fff;
  }
  #one li:hover,
  #two li:hover,
  #three li:hover {
    background: #999;
  }
  #one li.selected,
  #two li.selected,
  #three li.selected {
    background: #900;
    color: #fff;
  }

JavaScript

$(document).ready(function() {

    var listPrevie = $('.last_sketch ul'),
        item = $('#one li, #two li, #three li'),
        left = $('.left'),
        right = $('.right'),
        widthLastPhoto = 0;

    function selected() {
        $(this).toggleClass('selected');
    };
    function leftMove() {
        $('#three .selected').appendTo('#two');
        $('#two .selected').removeClass('selected')
    };
    function rightMove() {
        $('#two .selected').appendTo('#three');
        $('#three .selected').removeClass('selected')
    };

    item.click(selected);
    left.click(leftMove);
    right.click(rightMove);


});