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>  
                <div data-role="collapsible-set" id="list">

	<div data-role="collapsible">
	<h3>Section 1</h3>
	<input type="text" value="" maxlength="3"/>
				<select data-role="slider">
					<option value="off">Off</option><option value="on">On</option>
				</select>
        <button class="delete">delete</button>
	</div>
	
	<div data-role="collapsible">
	<h3>Section 1</h3>
	<input type="text" value="" maxlength="3"/>
				<select data-role="slider">
					<option value="off">Off</option><option value="on">On</option>
				</select>
        <button class="delete">delete</button>
	</div>
	
</div>                                          
        </div>
        
        <div data-role="footer" data-theme="b">
        </div>


</div>

 </body>

JavaScript

$(document).on("click", ".delete", function () {
        var parent = $(this).closest('div');
        var head = parent.prev('h3');
        parent.add(head).remove();
      });      

$(document).on("click", "#btn2", function () {
  var content =
    "<div>" +
      "<div data-role='collapsible'><h3>Section 1</h3><input type='text' value='' maxlength='3'/><select data-role='slider'><option value='off'>Off</option><option value='on'>On</option></select><button class='delete'>delete</button></div>" +
    "</div>";
 
  $( content ).appendTo( "#list" ).enhanceWithin();
});