JSFiddle - React, Tailwind, and code Playground

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="ref"/>
                        <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="ref"/>
                        <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" id="prueba">
             <h4><br/>
                </h4>

        </div>
    </div>

CSS

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

JavaScript

//localStorage.clear();
$(document).ready(function() {
    $("#list1").listview("refresh");
   if (localStorage["K"] != null) {
      var contentsOfOldDiv = jQuery.parseJSON(localStorage["K"]);    
      $("#list1").html(contentsOfOldDiv);
     } 
});

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

$(document).on("change", ".ref", function () {
     $("#prueba").text("refresh");
    localStorage["K"] = JSON.stringify($("#list1").html());
});

$(document).on("click", ".borrar", function () {
    $(this).parent("li").remove();
    $("#list1").listview("refresh");
  localStorage["K"] = JSON.stringify($("#list1").html());

    
});
$(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='ref'/><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");
  localStorage["K"] = JSON.stringify($("#list1").html());

    

});