JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.1.0.js"></script>
<script src="code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<!-- ko foreach: Groups() -->
<span class="droppable custSegmSelected" data-bind="text: low + '-' + high, attr: {'lower': low, 'upper': high}, style: {'padding': '0.8em'}"></span>
<!-- /ko -->
<span class="custom-segment-draggable dragLow" style="left: 0em;">it's a drag</span>

CSS

.custSegmSelected {
  border-bottom: 0.38em solid rgba(236, 0, 140, 1);
}

JavaScript

var viewModel = {
    Groups: ko.observableArray([
                { low: 0, high: 19 },
                { low: 20, high: 24 },
                { low: 25, high: 29 },
                { low: 30, high: 34 },
                { low: 35, high: 49 },
                { low: 50, high: 51 },
            ])
};

ko.applyBindings(viewModel);

$(".dragLow").draggable({
  axis: 'x',
  drag: function (event, ui) {
  }
});
$(".droppable").droppable({
  over: function (event, ui) {
  var o = ko.dataFor(this);
    alert(o.low + "-" + o.high);
  }
});