JSFiddle - React, Tailwind, and code Playground

by Noah Ratcliff

HTML

<ul data-role="listview" id="list-view" data-filter="true" data-filter-reveal="true">
    <li data-role="divider" id="divider">
         <h3>Users</h3>

    </li>
    <li id="btnTest1" data-icon="plus"><a href="#">Bill</a>
 <span class="ui-screen-hidden" id="user-id">1</span>

    </li>
    <li id="btnTest" data-icon="plus"><a href="#">Bob</a>
 <span class="ui-screen-hidden" id="user-id">2</span>

    </li>
    <li id="btnTest4" data-icon="plus"><a href="#">Dave</a>
 <span class="ui-screen-hidden" id="user-id">3</span>

    </li>
    <li id="btnTest3" data-icon="plus"><a href="#">Jane</a>
 <span class="ui-screen-hidden" id="user-id">4</span>

    </li>
    <li id="btnTest2" data-icon="plus"><a href="#">Joe</a>
 <span class="ui-screen-hidden" id="user-id">5</span>

    </li>
</ul>
<ul data-role="listview" id="list-view-hidden">
    <li data-role="divider" id="divider">
         <h3>Recipients</h3>

        <div class="ui-li-count" id="recipients-counter">0</div>
    </li>
    <li class="ui-screen-hidden" id="btnTest1-hdn" data-icon="minus"><a href="#">Bill</a>

    </li>
    <li class="ui-screen-hidden" id="btnTest-hdn" data-icon="minus"><a href="#">Bob</a>

    </li>
    <li class="ui-screen-hidden" id="btnTest4-hdn" data-icon="minus"><a href="#">Dave</a>

    </li>
    <li class="ui-screen-hidden" id="btnTest3-hdn" data-icon="minus"><a href="#">Jane</a>

    </li>
    <li class="ui-screen-hidden" id="btnTest2-hdn" data-icon="minus"><a href="#">Joe</a>

    </li>
</ul>
<input type="hidden" id="hdn-recipient-ids" value="" />

CSS

.ui-screen-hidden {
    display:none;
    !important
}

JavaScript

$('#list-view').on('click', 'li', function (event) {
    var attrID = $(this).attr('id');
    if (attrID != 'divider') {
        $('#' + attrID + '-hdn').attr('class', ''); //show the other element
        $(this).hide(); //hide this element
        $('#hdn-recipient-ids').attr('value', $('#hdn-recipient-ids').attr('value') + $(this).find('#user-id').text() + ','); //add user id to hidden input
        $('#recipients-counter').text($('#list-view-hidden li').size() - $('#list-view-hidden li.ui-screen-hidden').size() - 1); //update recipients counter
    }
});

$('#list-view-hidden').on('click', 'li', function (event) {
    var attrID = $(this).attr('id').replace('-hdn', '');
    if (attrID != 'divider') {
        $('#' + attrID).show(); //show the other element
        $(this).attr('class', 'ui-screen-hidden'); //hide this element
        $('#hdn-recipient-ids').attr('value', $('#hdn-recipient-ids').attr('value').replace($('#' + attrID).find('#user-id').text() + ',', '')); //removes user id from hidden input
        $('#recipients-counter').text($('#list-view-hidden li').size() - $('#list-view-hidden li.ui-screen-hidden').size() - 1); //update recipients counter
    }
});