JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#popupUndismissible" data-rel="popup" data-role="button" data-inline="true">Open</a>

<div data-role="popup" id="popupUndismissible" class="ui-content nw_popup-uzsu"  data-dismissible="false">
    <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
    <div id="panel_list">
        <div class="content">
            <ul id="uzsu-items" class="touch" data-role="listview">
            </ul>
        </div>
        <div class="controls">
            <div class="right">OK</div>
            <div class="right">ESC</div>  
            <div class="left add">ADD</div>
        </div>
    </div>    
    
    <div id="panel_date_type">
        <div class="content">
            <ul id="list_date_type" class="touch" data-role="listview">
                <li>Einmalig</li>
                <li>Immer</li>
                <li>Werktage</li>
                <li>Wochenende</li>
                <li>Tage auswählen</li>
                <li>Freie Eingabe</li>
            </ul>
        </div>
        <div class="controls">
            <div class="right">OK</div>
            <div class="right prev">ESC</div>
        </div>
    </div>
    
    <div id="panel_value_bool" style="display:none;">
        <div class="content">
            <select name="bool-flip" id="bool-flip" data-role="slider">
                <option value="0">Off</option>
                <option value="1">On</option>
            </select> 
        </div>
        <div class="controls">
            <div class="right">OK</div>
            <div class="right prev">ESC</div>  
        </div>
    </div>
    
    <div id="panel_value_percent" style="display:none;">
        <div class="content">
            <div class="numpad_value"><div></div></div>
            <div class="numpad">
                <div class="numpad_row">
                <div class="number_button">1</div>
                <div class="number_button">2</div>
                <div...

CSS

.nw_popup-uzsu {
    height: 240px;
    width: 320px;
    box-sizing: border-box;
    padding: 5px;
}

.nw_popup-uzsu > div {
    height: 100%;
}

.nw_popup-uzsu .ui-listview {
    margin: 0;
    height: 100%;
    overflow: auto;
}

.nw_popup-uzsu .content {
    padding-bottom: 30px;
    box-sizing: border-box;
    height: 100%;
}

.nw_popup-uzsu .controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30px;
    padding-top: 5px;
    box-sizing: border-box;
}

.nw_popup-uzsu .controls .right {
    float: right;
    margin-right: 30px;
}

.nw_popup-uzsu .controls .left {
    float: left;
    margin-left: 30px;
}

.numpad {
    width: 50%;
    height: 100%;
    float: left;
    display: table;
}

.numpad_value {
    width: 50%;
    height: 100%;
    float:right;
    display: table;
}

.numpad_value > div {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    font-size: 2em;
}

.numpad_row {
    display: table-row;
}

.number_button {
    width: 33%;
    display: table-cell;
    vertical-align: middle;
    text-align:center;
}

JavaScript

var a = [{name:'item 1', value: 10}, {name:'item 2', value: 0}];
var type = 'percent';
var cur;
var is_new = false;
var dialog = [];
var cur_dialog = '#panel_list';

function reload() {
    $('#uzsu-items').empty();
    for (var i = 0; i < a.length; i++)
        $('#uzsu-items').append('<li><a>' + a[i].name + '</a></li>');
    $('#uzsu-items').listview('refresh');
}

$(document).ready(function() {
    reload();
});

$('#uzsu-items').on('swipeleft', 'li', function(e) {
    a.splice($("li").index($(this)), 1);
    reload();
});

$('#uzsu-items').on('click', 'li', function() {
    cur = a[$("#uzsu-items li").index($(this))];
    is_new = false;
    next('#panel_value_' + type);
});

$('.add').on('click', function() {
    cur = {name: 'new item', value: 0};
    is_new = true;
    next('#panel_value_' + type);
});

$('#popupUndismissible').on('popupbeforeposition', function() {
    $('#popupUndismissible > div').hide();
    $('#panel_list').show();
    dialog = [];
    cur_dialog = '#panel_list';
});

function next(id) {
    $('#popupUndismissible > div').hide();
    $(id).show().trigger('change');
    dialog.push(cur_dialog);
    cur_dialog = id;
}

$('.prev').on('click', function() {
    cur_dialog = dialog.pop();
    if (cur_dialog) {
        $('#popupUndismissible > div').hide();
        $(cur_dialog).show().trigger('change');
    }
});

$('#panel_value_bool').on('change', function() {
    $('#panel_value_bool > div > select').val(cur.value).slider("refresh");
});

$('.number_button').on('click', function() {
    var txt = $(this).text();
    
    if (txt == 'AC')
        cur.value = '0';
    else if (txt == 'C')
        cur.value = cur.value.substring(0, cur.value.length - 1);
    else if (cur.value == '0')
        cur.value = txt;
    else
        cur.value += txt;
    
    // validation checks
    if (cur.value.length == 0)
        cur.value = '0';
    if (parseInt(cur.value) > 100)
        cur.value = cur.value.substring(0, cur.value.length - 1);
    
   ...