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">
<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>

<body> 
 

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

        <div data-role="header" data-theme="b">
                <h1>Lista con Botones en jQuery Mobile</h1>
        </div>

        <div data-role="content" >      
                 <button id="btn2">Add</button>  
                
                <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 data-role="slider">
					<option value="off">Off</option><option value="on">On</option>
				</select>

                          </div>
                  </li>
                  <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 data-role="slider">
					<option value="off">Off</option><option value="on">On</option>
				</select>

                          </div>
                  </li>				
                   			
                </ul>       
                                                                
        </div>
        
        <div data-role="footer" data-theme="b">
               ...

CSS

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

JavaScript

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

    $(document).on("click", ".borrar", function () {
        $( this ).parent( "li" ).remove();
        $( "#list1" ).listview( "refresh" );
      });
     $(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'/><label >label2:</label><select data-role='slider'><option value='off'>Off</option><option value='on'>On</option></select></div>" +
              "</li>";
 
  $( content ).appendTo( "#list1" ).enhanceWithin();
  $( "#list1" ).listview( "refresh" );
   
});

$(document).ready(function(){
    loadSettings();
    $(window).unload(saveSettings);
    });
    function loadSettings() {
    $('.referencia').val(localStorage.income);
    //$('#saving-per-month').val(localStorage.saving);
    //$('#current-age').val(localStorage.age);
     // document.querySelector('html').innerHTML = localStorage['demo-page'];
    }
    function saveSettings() {
     // localStorage['demo-page'] = document.querySelector('html').innerHTML;
    //localStorage.age = $('#current-age').val();
    //localStorage.saving = $('#saving-per-month').val();
    localStorage.income = $('.referencia').val();
    }