JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html>
<head>
    <title>Dynamic list test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
    
<body>
<div id="initialpage" data-role="page">
    <div id="hdr" data-role="header">
        <h1>Dynamic List Test</h1>
    </div>
    <ul id='list' data-role='listview'>
    </ul>
</div>
</body>
</html>

CSS

.ui-block-b a{
    margin-left:6px !important;
}

JavaScript

var DOMElement = '';

systemArray = ["system1", "system2", "system3", "system4", "system5"];

DOMElement += '<li>';
        for (i = 0 ; i < systemArray.length ; i++) {
            if (typeof systemArray[i] !== 'undefined') {
                DOMElement += '<fieldset class="ui-grid-a"> <div class="ui-block-a" style="width:60%;"> <h2 id="'
                DOMElement += "system" + systemArray[i];
                DOMElement += '">';
                DOMElement += systemArray[i];
                DOMElement += '</h2>';
                DOMElement += '</div>';
                DOMElement += '<div class="ui-block-b" data-role="controlgroup" data-type="horizontal" style="width:30%;">';
                DOMElement += '<a href="#" class="deletebutton" data-icon="delete" data-role="button" id="';
                DOMElement += 'delete|' + systemArray[i];
                DOMElement += '" data-iconpos="notext">Cancel</a>';
                DOMElement += '<a href="#" class="modifybutton" data-icon="gear" data-role="button" id="';
                DOMElement += 'modify|' + systemArray[i];
                DOMElement += '" data-iconpos="notext">Modify</a>';
                DOMElement += '<a href="#" class="connectbutton" data-icon="arrow-r" data-role="button" id="';
                DOMElement += 'connect|' + systemArray[i];
                DOMElement += '" data-iconpos="notext">Connect</a>';
                DOMElement += '</div>'
                DOMElement += '</fieldset>';
            }   

        }
DOMElement += '</li>';

// Needs trigger ('create') to create the icons http://jquerymobiledictionary.pl/faq.html

$("#list").html(DOMElement).trigger('create');
$("#list").listview("refresh");