Adding and removing li by Javascript
<p>I am having left side pane and right side pane. I want to deal with two scenarios<br/></p>

<ol>
<li>When I click the list(li) on right side that want add on left side(`initially left side pane is empty) and remove from right side.</li>
<li>Reverse part of first one. When i click the added li in left side that need to be remove from the left side and added to the right side.</li>
</ol>

<p>I did the first scenario like below<br/></p>

<pre><code>&lt;div class="left_pane"&gt;
  &lt;div class="content_left_pane"&gt;
    &lt;ul data-role="listview" id="left_side_ul"&gt;
    &lt;/ul&gt;
   &lt;/div&gt;
 &lt;/div&gt;

&lt;div class="right_pane"&gt;
 &lt;ul data-role="listview" id="right_side_ul"&gt;   
  &lt;li class="showDetails" id="account-1" onclick="selected_destination($(this).attr('id'))"&gt;
    &lt;div class="ui-grid-b"&gt;
       &lt;div class="ui-block-a"&gt;&lt;div&gt;[Facility name] A&lt;/div&gt;&lt;div&gt;[Account]&lt;/div&gt;&lt;/div&gt;
       &lt;div class="ui-block-b"&gt;&lt;div&gt;[Address Line 1]&lt;/div&gt;&lt;div&gt;[Address Line 2]&lt;/div&gt;&lt;div&gt;[City],[Statte],[Zip code]&lt;/div&gt;&lt;/div&gt;
       &lt;div class="ui-block-c"&gt;&lt;span class="ui-li-count" style="right: 30%; font-size: 15px;"&gt;12&lt;/span&gt;&lt;/div&gt;
     &lt;/div&gt;             
   &lt;/li&gt;    
 &lt;/ul&gt;
&lt;/div&gt;



&lt;script&gt;
function selected_destination(id){   
      $("#right_side_ul li#"+id+"").clone().prependTo("div.content_left_pane ul#left_side_ul");
      $("#right_side_ul li#"+id+"").remove();
    }

  &lt;/script&gt;
</code></pre>

<p>I don't have any clue to do the second part. Because in the first part i am sending the current li id in onclick function. But in the reverse part, in the left pane i am having ul only so i don't know how to  do the second scenario.</p>
