JSFiddle - React, Tailwind, and code Playground

by Zikes

HTML

<ul id="sortable">
    <li id="sub_list_1">
        <label>Main List</label> 
        <span class="floater">
            <label>Min: <input class="txt-min" /></label>
            <label>Limit: <input class="txt-limit" /></label>
            <a href="#unsubscribe">&#10005;</a>
        </span>
    </li>
    <li id="sub_list_2">
        <label>The Buck List</label> 
        <span class="floater">
            <label>Min: <input class="txt-min" /></label>
            <label>Limit: <input class="txt-limit" /></label>
            <a href="#unsubscribe">&#10005;</a>
        </span>
    </li>
    <li id="sub_list_3">
        <label>Nillemotes</label> 
        <span class="floater">
            <label>Min: <input class="txt-min" /></label>
            <label>Limit: <input class="txt-limit" /></label>
            <a href="#unsubscribe">&#10005;</a>
        </span>
    </li>
    <li id="sub_list_4">
        <label>Zikes's Private List</label> 
        <span class="floater">
            <label>Min: <input class="txt-min" /></label>
            <label>Limit: <input class="txt-limit" /></label>
            <a href="#unsubscribe">&#10005;</a>
        </span>
    </li>
</ul>

CSS

html{
    background:#CCD9C8;
    padding:3em 1em 1em;
    font-family:'Helvetica Neue', Helvetica;
}
#sortable{list-style:none;padding:2px;}
#sortable li{
    display:block;
    border:1px solid #6F857B;
    border-radius:3px;
    background:#3E524A;
    padding:2px 5px;
    color:#FFF;
    margin-bottom:2px;
    white-space:nowrap;
    position:relative;
    overflow:hidden;
}
#sortable li:before{
    content:"=";
    color:#ccc;
}
#sortable li.ui-state-highlight{
    opacity:.5;
}
#sortable li.ui-state-highlight:before{
    content:"=";
    color:transparent;
}
#sortable li > label{
    font-weight:bold;
    width:15em;
    display:inline-block;
    overflow:hidden;
    white-space:nowrap;
    text-overflow: ellipsis
}
#sortable li a{
    background:#F00;
    color:#FFF;
    font-weight:bold;
    font-family:monospace;
    border-radius:10px;
    text-decoration:none;
    line-height:18px;
    height:18px;
    width:18px;
    display:inline-block;
    text-align:center;
    padding-right:1px;
    margin-left:3px;
}
.txt-min, .txt-limit{
    width: 3em;
    border-radius:3px;
    border:none;
    padding:0 2px;
    margin:3px;
}
.floater{
    position:absolute; 
    top:0; 
    right:0; 
    display:inline-block;
    padding:1px 3px;
    background:#3E524A;
}
.floater label{
    font-size:80%;
    font-weight:bold;
}

JavaScript

function update() {
    alert(JSON.stringify(
    $('#sortable').sortable('toArray').map(function(id) {
        var min = parseInt($('#' + id + ' .txt-min').val(), 10) || 0;
        var limit = parseInt($('#' + id + ' .txt-limit').val(), 10) || 0;
        var list_id = parseInt(id.replace(/sub_list_/, ''), 10);
        min = (min < 0 ? 0 : min);
        limit = (limit < 0 ? 0 : limit);
        return [{
            list_id: list_id,
            min_score: min,
            limit: limit
        }];
    })));
}

$('#sortable').sortable({
    stop: update,
    placeholder: 'ui-state-highlight'
}).disableSelection();

$('.txt-min, .txt-limit').on('change', update);