JSFiddle - React, Tailwind, and code Playground

by zulfikar

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css">
    <!-- Start of first page -->
    <div data-role="page" id="page-one">


        <div data-role="header">
            <div>
                <a href="#mypanel" data-rel="close"> = </a>
            </div>
            <h1>Daftar Peserta</h1>
        </div>
        <!-- /header -->

        <div role="main" class="ui-content">
            <ul id="list-mhs" data-role="listview" data-inset="true" data-filter="true"></ul>
            <a href="#addPage" class="ui-btn ui-btn-inline ui-icon-plus ui-btn-icon-left">Add</a>
        </div>
        <!-- /content -->
    </div>
    <div data-role="page" id="addPage" style="margin: 10">
        <div data-role="header">
            <a data-icon="arrow-l" href="#page-one"></a>
            <h1> Menambah data</h1>
        </div>
        <table>
            <th>
                <tr> Nama</tr>
                <tr> <input id="nama" required> </tr>
            </th>
            <th>
                <tr> NIS</tr>
                <tr> <input id="nis" required> </tr>
            </th>
            <th>
                <tr> Nilai</tr>
                <tr> <input id="nilai" required> </tr>
            </th>
        </table>
        <a href="#page-one" class="ui-btn ui-btn-inline ui-icon-plus ui-btn-icon-left" id="addButton">Add</a>

    </div>
    <!-- Start of second page -->
    <div data-role="page" id="page-two" data-theme="b">
        <div data-role="header">
            <a data-icon="arrow-l" href="#page-one"></a>
            <h1>Detail Nilai</h1>
        </div>
        <!-- /header -->

        <div role="main" class="ui-content">
            <table data-role="table" data-mode="reflow" id="table-detailMhs">
                <thead>
                    <tr>
                        <th data-priority="1">NIS</th>
                        <th data-priority="2">Nama</th>
                        <th data-priority="3">Nilai</th>
                   ...

JavaScript

var dataObject = [{
                "NIS": "125060400111044",
                "Nama": "Zulfikar fahmi Falakh",
                "Nilai": 100,
            }, {
                "NIS": "125060400111042",
                "Nama": "Kotak Sakti",
                "Nilai": 90,
            }, {
                "NIS": "125060400111043",
                "Nama": "C # God",
                "Nilai": 101,
            }


        ];

        var Application = {
            initApplication: function() {

                $(window).load(function() {
                    Application.initShowMhs();
                    $('#list-mhs').listview('refresh');
                })
                $(document).on('click', '#detail-mhs', function() {
                    var nim = $(this).data('nimmhs');
                    Application.initShowDetailMhs(nim);
                })

                $(document).on('click', '#addButton', function() {
                    if ($("#nis").val() && $("#nama").val() && $("#nilai").val()) {
                        dataObject.push({
                            NIS: $("#nis").val(),
                            Nama: $("#nama").val(),
                            Nilai: $("#nilai").val()
                        })
                        Application.initShowMhs();
                    }

                })
            },

            initShowMhs: function() {
                var appendList;
                $('#list-mhs').html("")
                for (let i = 0; i < dataObject.length; i++) {
                    appendList = '<li><a href=#page-two?id=' + dataObject[i].NIS +
                        '"target="_self" id="detail-mhs" data-nimmhs="' + dataObject[i].NIS + '"><h2>' + dataObject[i].Nama +
                        '</h2><p>' + dataObject[i].NIS + '</p><p><b>' + dataObject[i].Nilai + '</b></p></a></li>';
                    $('#list-mhs').append(appendList);
                }
            },

            initShowDetailMhs: function(nim) {
                var...