JSFiddle - React, Tailwind, and code Playground

by Juan Camilo Romero

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<link rel="stylesheet" href="http://weareoutman.github.io/clockpicker/dist/jquery-clockpicker.min.css">
<title>Lista con Botones</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script src="http://weareoutman.github.io/clockpicker/dist/jquery-clockpicker.min.js"></script>
<iframe src='' name='iframecontoff' style="width:0px;height:0px;visibility:hidden"></iframe>
<iframe src='' name='iframeconton' style="width:0px;height:0px;visibility:hidden"></iframe>

<body> 
 

<div data-role="page" id="demo-page">

        <div data-role="header" data-theme="b">
                <h1>Areas - LigthGo</h1>
                <a href="#" class="ui-btn-right" data-icon="plus" id="btn2">Add</a>
        </div>

        <div data-role="content" >      
<div data-role="controlgroup" data-type="horizontal" id="navgroup">
<a href="#" data-role="button" id="btn3" data-icon="power" data-theme="e">On all</a>
<a href="#" data-role="button" id="btn4" data-icon="power" data-theme="b">Off all</a>
<input type="text" value="" maxlength="12" placeholder="Codigo De Control" id="control"/>    
</div>
               
            <ul id="list1" data-role="listview" data-inset="true" data-filter="false" data-split-icon="delete">
                   <li><a href="#" class="fila">
	        	elemento1</a><a href="#" data-icon="delete" class="borrar">Favorita</a><div class="cuadro">                        
                          
                          <label>label:</label>
	        	<input type="text" value="" maxlength="3" class="referencia"/>
			
                          <label >label2:</label>
				<select  class="sld" data-role="slider">
					<option value="off">Off</option><option value="on">On</option>
				</select>
                       

   <div class="ui-field-contain">
        ...

CSS

.cuadro
{
padding:10px;
display:none;
text-align:center;
border:solid 1px #c3c3c3;
}
#navgroup {text-align:center;}

JavaScript

$(document).on("click", ".fila", function () {
        $(this).next().next(".cuadro").slideToggle(); // al click desplegar sublista
      });

    $(document).on("click", ".borrar", function () {
        $( this ).parent( "li" ).remove();    //eliminar elemento
        $( "#list1" ).listview( "refresh" );  //refrescar lista
      });
     $(document).on("click", "#btn2", function () {
  var content =
              "<li>" +
              "<a href='#' class='fila'>elemento1</a><a href='#' data-icon='delete' class='borrar'>Favorita</a><div class='cuadro'><label>label:</label><input type='text' value='' maxlength='3'class='referencia'/><label >label2:</label><select class='sld' data-role='slider'><option value='off'>Off</option><option value='on'>On</option></select><div class='ui-field-contain'><label>Encender a las:</label><input type='text' data-mini='true' class='input-a' value=''><label>Apagar a las:</label><input type='text' data-mini='true' class='input-b' value=''></div></div>" +
              "</li>";
 
  $( content ).appendTo( "#list1" ).enhanceWithin(); // agregar nueva fila a lista
   $('.input-a').clockpicker({ donetext: 'Done', placement: 'top', align: 'left','default': 'now'});
   $('.input-b').clockpicker({ donetext: 'Done', placement: 'top', align: 'left','default': 'now'});
  $( "#list1" ).listview( "refresh" ); //refrescar lista

   
});
 $(document).on("change", ".sld", function () { // on/off 
    $( this ).parent().find('.input-a').clockpicker().val("");
    $( this ).parent().find('.input-b').clockpicker().val(""); 
   var refer= $( this ).parent().find(".referencia").val(); //obtener referencia
   var letra=refer.substring(0, 1); 
   var numeros=refer.substring(1, 3);
   var newValue = $( this ).val();
   var control=  $("#control").val(); 
     
  if(newValue == "on"){
     window.frames['iframeconton'].location.replace('https://agent.electricimp.com/'+control+'?led='+numeros+'N'+letra); 
  } else {
    ...