JSFiddle - React, Tailwind, and code Playground

by kannan ds

HTML

<div class="container">
    <div class="row">
    <div class="col-md-4">
      		<ul class="sortList">
            	<li class="row">
                  <div class="col-md-7">
                  1
                  </div>
                  <div class="col-md-5">
                  	<input type="button" class="bth btn btn-default previous" value="prev">
          		    <input type="button" class="bth btn btn-default next" value="next">
                  </div>
                </li>
                
                <li class="row">
                  <div class="col-md-7">
                  2
                  </div>
                  <div class="col-md-5">
                  	<input type="button" class="bth btn btn-default previous" value="prev">
          		    <input type="button" class="bth btn btn-default next" value="next">
                  </div>
                </li>
                
                <li class="row">
                  <div class="col-md-7">
                  3
                  </div>
                  <div class="col-md-5">
                  	<input type="button" class="bth btn btn-default previous" value="prev">
          		    <input type="button" class="bth btn btn-default next" value="next">
                  </div>
                </li>
                
                <li class="row">
                  <div class="col-md-7">
                  4
                  </div>
                  <div class="col-md-5">
                  	<input type="button" class="bth btn btn-default previous" value="prev">
          		    <input type="button" class="bth btn btn-default next" value="next">
                  </div>
                </li>
                
                <li class="row">
                  <div class="col-md-7">
                  5
                  </div>
                  <div class="col-md-5">
                  	<input type="button" class="bth btn btn-default previous" value="prev">
          		    <input type="button" class="bth...

CSS

.sortList{
	margin:0px;
	padding:0px;
	list-style-type:none;
	
}
.sortList li{
	padding:5px;
	border:1px solid #999;
	margin:2px;
	cursor:pointer;

	 position:relative;
	 
	 transi
}
.currentSelection{
	background-color:gray;
	
}

JavaScript

$(document).ready(function() {
  $('.previous').click(function() {
  /*  var current = $('.currentSelection');*/
  
  var current = $(this).closest("li");
  
    if( current.index() != 0 && !current.is(":animated") ){
      currentTop = parseInt(current.css("top").replace("px",""));
	  
      current.animate({
		  
		  top:currentTop - 33 
		  })
		  
      current.prev().animate({top:currentTop + 33},function(){
          current.css("top",0).prev().css("top",0);
          current.prev().before(current);
      })
    }
  });
  
  $('.next').click(function() {
 /*   var current = $('.currentSelection');*/
 
    var current = $(this).closest("li");
	
    if( current.index() != ( $(".sortList li").length-1)  && !current.is(":animated") ){
      currentTop = parseInt(current.css("top").replace("px",""));
      current.animate({top:currentTop + 33 })
      current.next().animate({top:currentTop - 33},function(){
          current.css("top",0).next().css("top",0);
          current.next().after(current);
      })
    }
  });
  
 /* $(".sortList li").on("click", function() {
    $(".sortList li").removeClass("currentSelection");
    $(this).addClass("currentSelection");
  });
*/
});