JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://rubaxa.github.io/Sortable/Sortable.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
    <ol id="advanced-1" class="list-group">
        <li><span class="index">1.</span>A Good Meal</li>
        <li><span class="index">2.</span>A technical Improvement</li>
        <li><span class="index">3.</span>Nonsense</li>
    </ol>
    <ol id="advanced-2" class="list-group">
        <li><span class="index">1.</span>A Good Meal</li>
        <li><span class="index">2.</span>A technical Improvement</li>
        <li><span class="index">3.</span>Nonsense</li>
    </ol>
</div>

CSS

.ghost {
    color: #fff;
    background-color: #c00;
    position: relative;
}
.index {
    display: inline-block;
    height: 100%;
    width: 10px;
    margin-right: 10px;
    background: inherit;
    color: inherit;
}
.container {
    text-align: center;
}
ol {
    display: inline-block;
    list-style:none;
    text-align: left;
}

JavaScript

var byId = function (id) { return document.getElementById(id); };
[{
    		name: 'advanced',
    		pull: true,
    		put: true
    	},
    	{
    		name: 'advanced',
    		pull: true,
    		put: true
    	}].forEach(function (groupOpts, i) {
    		var sortable = Sortable.create(byId('advanced-' + (i + 1)), {
            group: groupOpts,
            ghostClass: "ghost",
           onEnd: function ( /**Event*/ evt) {
               $('.list-group li').each(function (index) {
                   var newIndex = index + 1 + '.';
                   $(this).find('.index').html(newIndex);
               });
           }
        });
  });