JSFiddle - React, Tailwind, and code Playground

by Omar X

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script src="https://dl.dropboxusercontent.com/s/hxh6teytrjoo222/toggle-icon.png"></script>
<link rel="stylesheet" href="https://dl.dropboxusercontent.com/s/kk2kwhlagzsi9g1/default.css">
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<div data-role="page" id="home">
    <div data-role="header" data-theme="b">
         <h1>a</h1>

    </div>
    <!-- /header -->
    <div data-role="content">
        <div class="contentsubbox" id="testCaseContainer"></div>
    </div>
    <div data-role="footer" data-theme="b" id="firstPageFooter">
        <button class="addtestbtn" id="addTestCase" data-theme="a" style="color: #ffffff!important;">Add</button>
    </div>
    <div data-role="popup" id="Mainnavpanel" data-theme="b" data-arrow="r">
        <ul data-role="listview">
            <li> <a href="#MainPageheader" data-rel="close" class="ui-btn">Edit</a>

            </li>
            <li><a href="Page1.html" class="ui-btn" data-transition="none">Delete</a>

            </li>
            <li><a href="Page2.html" class="ui-btn" data-transition="none">copy</a>

            </li>
        </ul>
    </div>
</div>

CSS

.editButton {
    background: black;
    width: 100px;
    color: white;
    text-align: center;
    height: 38px;
    position: absolute;
    float: left;
    left: 86%;
    top: -12px;
}
.three-dot-menu {
    font-size: 2em;
    color: white;
    float: right;
    margin-top: -20px;
}
.menu-panel {
    display: none;
    color: white;
    background-color: gray;
    float: right;
    width: 200px;
    padding: 15px;
}
.icon1 {
    background: url("https://dl.dropboxusercontent.com/s/2uj9wy8hz0uoovk/Sprite.png#") no-repeat scroll -40px -108px rgba(0, 0, 0, 0);
    display: block;
    height: 19px;
    margin-top: -8px;
    position: absolute;
    right: 15px;
    top: 50%;
    width: 5px;
    cursor:pointer;
}
.ui-popup {
    margin-top: 0px;
    ! important;
    margin-left: 0px;
    !important;
}

JavaScript

$(function () {
    $(document).on("click", "i.test_h", function (e) {
        
        /*$("#Mainnavpanel").popup("open", {
            y: $(this).offset().top + ($(this).height() / 2),
            x: $(this).offset().left
        });*/
        $("#Mainnavpanel").popup("open", {
            positionTo: $(this)
        });
        // $( "#Mainnavpanel").panel("open");

    });
});

$(document).on("pagecreate", "#home", function () {
    $('#addTestCase').click(function () {
        createTestCase("dd", true, "null")
    });
});

function createTestCase(testCaseName, iscreatedFromScript, jsonObject) {
    var id;
    if (typeof ($("#testCaseContainer li:last").attr('id')) == 'undefined') {
        id = "tc_1";
        var index = id.indexOf("_");
        var count = id.substring(index + 1, id.length);
        count = parseInt(count);
        var conunter = count;
    } else {
        id = $("#testCaseContainer li:last").attr('id');
        var index = id.indexOf("_");
        var count = id.substring(index + 1, id.length);
        count = parseInt(count);
        var conunter = count;
        id = id.substring(0, index) + "_" + parseInt(count + 1);
    }
    var html = '<div class="testcaselist_row">' + '<ul>' + '<li id="' + id + '" class="clickTestCaseRow"><a href="#" style="color: #ffffff!important;">' + id + '<i class="icon1 test_h"></i></a></li>' + '</ul></div>';
    $('#testCaseContainer').append(html).enhanceWithin();
}