title: Use jQuery to make a NEW instance of angularJS array
body: <p>I am working with Angular and jQuery</p>
  
  <p>I have div "A", pulling content via angular</p>
  
  <pre><code>&lt;div class="a"&gt;
     &lt;p ng-repeat="banana in bananas"&gt;{{banana}}&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have ul class "B"</p>
  
  <pre><code>&lt;ul class="b"&gt;
    &lt;li&gt;content 1&lt;/li&gt;
    &lt;li&gt;content 2&lt;/li&gt;
    &lt;li&gt;content 3&lt;/li&gt;
  &lt;ul&gt;
  </code></pre>
  
  <p>When any of the <code>li</code> inside "B" is clicked insert that <code>li</code> in <code>.accordion</code></p>
  
  <pre><code>//this works fine    
  $(".b li").click(function () {
     $(this).clone().appendTo(".accordion");
   });
  </code></pre>
  
  <p>The problem is when I want to do the same thing for div "A"... div "A" is inserted on the LAST appended <code>li</code></p>
  
  <p>jQuery accordion div, its empty, </p>
  
  <pre><code>&lt;div class="accordion"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and am trying to create a NEW instance of div "A" everytime a <code>li</code> is clicked then must be inserted as a NEW child of the accordion so that it can work independently </p>