JSFiddle - React, Tailwind, and code Playground

by Himanshu Joshi

HTML

<script src=" https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<ul data-bind="foreach:names" class="parentContainer">
  <li class = "">
    <span data-bind="text:$data"></span>
    <span class="up" data-bind="click:$parent.up">up</span>
    <span class="down" data-bind="click:$parent.down"> down</span>
  </li>
</ul>

CSS

.arrow-up {
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid black;
}

.arrow-down {
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #f00;
}

.childContainer{
  display: inline;
  position:relative;
}

.parentContainer{
  
  
}

JavaScript

function model(){
								var self = this;
								self.names=  ko.observableArray(["joe", "moe", 	"lui","john"]);	
                self.up =  function(item){
                		alert("up clicked for " + item);
                    var index = self.names.indexOf(item);
                    if(index> 0){
                    	self.names.remove(item);
                      self.names.splice(index-1, 0, item);
                    }
                };
                self.down = function(){
                
                }
              };
ko.applyBindings(new model());