I´m trying to development a editable list view with jquery. My list, began with an element that have inside some elements that you could see when you click on it. i have a button to create a new element of the principal list. How can i create another element of the principal list with the same type of elements and characteristics of the first element of the principal list?

Here is my code:

 <title>Lista con Botones</title>

<meta name="viewport" content="width=device-width, initial-scale=1"> 

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.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>

<style> 

.cuadro

{

padding:10px;

display:none;

text-align:center;

border:solid 1px #c3c3c3;

}

</style>

 

<div data-role="page">

        <div data-role="header" data-theme="b">

                <h1>Lista con Botones en jQuery Mobile</h1>

        </div>

        <div data-role="content" >      

                 <button id="btn2">Agregar</button>  

                

                <ul id=list1 data-role="listview" data-inset="true" data-filter="false">

                   <li><a href="#" id="flip" class="fila">

        elemento1</a><a href="#" data-icon="delete">Favorita</a><div id="panel" class="cuadro">                        

                          

                          <label for="name">label:</label>

        <input type="text" name="name" value="" maxlength="3" id="referencia" />

                          <label for="slider2">label2:</label>

<select id="slider2" 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">

                <h4>LightGo<br/>

                Todos los derecchos reservados</h4>

        </div>

</div>

<script> 

$(document).ready(function(){

  $("#flip").click(function(){

    $("#panel").slideToggle();

  });

  $("#btn2").click(function(){

    $("#list1").append('<li><a href="#" id="flip3">elemento2</a><a href="#" data-icon="delete">Favorita</a></li>');

$('#list1').listview('refresh');

  });

});

</script>

I hope you can help me

Thanks a lot :)