JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.js"></script>
<ul id="alarmslist" data-bind="foreach: days, jqmRefreshList: days" data-inset="true" data-role="listview">
    <li data-role="list-divider"><span data-bind="text: date"></span></li>
    <!-- ko template: {foreach: alarms1, afterRender: $parent.alarmsPostProcess} -->
    <li>
         <a data-bind="attr: { href: '#popupBasic' + alarmID() }" data-rel='popup'><span data-bind="text:  alarmID"></span></a>
        <section   data-corners="true" data-history="false" data-overlay-theme="a">
            <ul data-role="listview" data-inset="true">
                <li data-role="divider" data-theme="a">Alarm Options</li>
                 <li><section class="alarmDetail">Go to Details  for </section></li>
                <li><a href="#">Go to Data</a></li>
                <li><a href="#">Acknowledge</a></li>
            </ul>
        </section>
    </li>
    <!-- /ko -->
</ul>

JavaScript

ko.bindingHandlers.jqmRefreshList = {
    update: function (element, valueAccessor) {
        ko.utils.unwrapObservable(valueAccessor());
        try {
            $(element).listview("refresh")
        } catch (ex) {}
    }
}

function alarm(id)
{
    return {
            alarmID : ko.observable(id)
        };
}
// <span data-bind="text:  alarmID"></span>
// data-bind="attr: { id: 'popupBasic' + alarmID() }"
var 
    vm = {
        days:[
            { date:'01.01.2002',
              alarms1:[
                alarm(1),
               alarm(2)
            ]},
            { date:'01.02.2002',
               alarms1:[
                alarm(3),
               alarm(4)
            ]}
        ],
        alarmsPostProcess: function(e,z){
           var p = $(e).find('section').eq(0).popup();
           //ko.applyBindings(z,p[0]); 
           p.attr('id','popupBasic'+z.alarmID() );
        }
    };
        
ko.applyBindings(vm);