JSFiddle - React, Tailwind, and code Playground

by michelejs

HTML

<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
<script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css">
<script id="template" type="text/x-jquery-tmpl">
    <div id="macontent" data-role="content">
        <h2>${TITLE}</h2>
        <ul role="listbox" data-role="listview" data-inset="true" >
            <li>${FIRST_ROW}</li>
            <li>${SECOND_ROW}</li>
        </ul>
    </div>
</script>

<div data-role="page" id="page1">
    <div data-role="header">  
        <a id="replace">replace content</a>  
        <a id="replace_without_call">replace without page() call</a>  
        <h3>Static Header</h3>
    </div>
    <div id="existingContent" data-role="content">
        <h2>Static Content</h2>
        <ul role="listbox" data-role="listview" data-inset="true" >
            <li>alpha</li>
            <li>bravo</li>
        </ul>
        <hr/>
        <p>
            This demonstrates the need to call page() on all elements that you've dynamically added to the DOM of a JQM app, so that JQM can style them correctly.</p>
        <p>Note that we are calling page() on *every* element inside the page element.
        </p>
    </div>
</div>

JavaScript

var nPlayers=0;
            $(document).ready(function(){
                $("#sendNPlayers").click(function() {
                    nPlayers=$("#nPlayers").val();
                    //alert(nPlayers);
                    if($.isNumeric(nPlayers)&&nPlayers>5){
                        for(var i=0;i<nPlayers;i++){
                            $(".secondStep").append('<br><label for="player_'+i+'">Giocatore '+(i+1)+'</label><input type="text" id="player_'+i+'" value="player_'+i+'">');
                        }            
                        $( ".firstStep" ).html("");
                        $('.secondStep').page();
                        $('.secondStep').show();
                        

                    }else(alert("Inserisci un numero!"));
                });
                $("#playersName").click(function() {
                    //alert("nomi" + nPlayers);
                    for(var i=0;i<nPlayers;i++){
                        var html = '<li id="item_'+i+'" class="ui-state-default">222';//<div id="itemDiv_'+i+'"';
                        /*if(i>4)
                            html+=' class="blueBck"';
                        else
                            html+=' class="greenBck"';*/
                        //html+='>'+$("#player_"+i).val()+'</div>';
                        /*if(i==5){
                            html+=' <div ></div>';
                        }*/
                        html+='</li>'
                        $("#sortable").append(html);
                        //$('#sortable').show();
                    }
                    $( ".secondStep" ).html("");
                    $('.connectedSortable').each(function() {
                            result = "";
                            $(this).find("li").each(function(){
                                result += $(this).text() + ",";
                            });
                            $("."+$(this).attr("id")+".list").html(result);
                    });
                   ...