JSFiddle - React, Tailwind, and code Playground

by dirtyd77

HTML

<div style="background-color: #dceaf4;" class="handle">
        <div style="float:left;">
            <b class="order_interaction" id="interactionOrder">order</b></div>
        <div style="float:left;"><b id="interactionType">type</b></div>
        <div style="width:100%; text-align:right;">
            <div style="text-align:right;">
                <a href="#" class="interactionComments">
                    <img style="cursor:pointer;" title="Comments" src="https://www.nyceda.org/wp-content/uploads/2012/02/comments-icon.jpeg" height="10"/>
                </a>
                    <a class="moveUp_interaction">
                        <img style="cursor:pointer;" src="http://www.antisocialmediallc.com/wp-content/uploads/2012/02/Up-Arrow.jpg" height="10" class="moveup2" title="Move Up" />
                    </a>

                    <a class="moveDown_interaction">
                        <img style="cursor:pointer;" src="http://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png" height="10" class="movedown2" title="Move down"/>
                    </a>

                    <a class="del_interaction">
                        <img style="cursor:pointer;" src="http://icons.iconarchive.com/icons/visualpharm/must-have/256/Delete-icon.png" height="10" class="delete" title="Delete"/>
                    </a>
            </div> 
        </div>

JavaScript

$(document).ready(function()
{

$('.moveUp2').click(function(){
    var diveItem = $(this).parent();
    if (diveItem.prev().is('div'))
    {
        diveItem.insertBefore(diveItem.prev())
    }
});

$('.moveDown2').click(function(){
    var diveItem = $(this).parent();
    if (diveItem.next().is('div'))
    {
        diveItem.insertAfter(diveItem.next())
    }
});
  });