JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<ul id="mitigationList" class="list-group">
</ul>
JavaScript
$(document).ready(readyFn);
function readyFn(jQuery) {
addMitigations();
addEventBindingToRunButtons();
}
function addMitigations() {
var mitigations = ['1', '2', '3'];
var $ul = $("ul#mitigationList");
$.each(mitigations, function(i, e) {
var $span = $("<span/>").addClass("sameline-content").text(
"Mitigation Name: ");
var $div = $("<div/>").addClass("sameline-content").addClass(
"mitigationName").text(e + ":");
var $button = $("<button/>").addClass("run btn btn-success").text("Run");
var $li = $("<li/>").addClass("list-group-item");
$li.append($span).append($div).append($button);
$ul.append($li);
});
}
function addEventBindingToRunButtons() {
$(".run").on('click', 'ul#mitigationList', clickFunction);
$(".run").on('dblclick', 'ul#mitigationList', function(e) {
e.preventDefault();
});
}
function clickFunction() {
alert('hello');
}
$(document).on('click', '')