title: Moving list element from one unordered list to another with JQuery
body: <p>I have looked at a few of the other answers to this question, but I have still not been able to get it done correctly.  I have two unordered lists.  One is dynamically created from a database table.  The other is just a static table that begins empty.  Each list contains, or will contain, list elements with nested anchor and awesome-font icon elements.  My goal is to be able to, upon clicking the icon, transfer the list element from one list to the other, while changing the icon from a plus to minus sign.  So far, I can successfully transfer items from the dynamic list to the static one, and I can change the icons, but I can not figure out how to transfer them back to the original list.</p>
  <p>Here's my html:</p>
  <pre><code>&lt;div class=&quot;row&quot; id=&quot;constructTable&quot;&gt;
          &lt;div class=&quot;col-md-6&quot;&gt;
              &lt;h1&gt;Choose your Columns:&lt;/h1&gt;
              &lt;div class=&quot;panel-group&quot; id=&quot;accordion&quot; role=&quot;tablist&quot; aria-multiselectable=&quot;true&quot;&gt;
                  &lt;div class=&quot;panel panel-default&quot;&gt;
                      &lt;div class=&quot;panel-heading&quot; id=&quot;heading1&quot; role=&quot;tab&quot;&gt;
                          &lt;h4 class=&quot;panel-title&quot;&gt;
                              &lt;a role=&quot;button&quot; data-toggle=&quot;collapse&quot; data-parent=&quot;#accordion&quot; href=&quot;#collapse1&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;collapse1&quot; class=&quot;collapsed&quot;&gt;&lt;span style=&quot;font-size: 16px;&quot;&gt;Candidate Data&lt;/span&gt;&lt;/a&gt;
                          &lt;/h4&gt;
                      &lt;/div&gt;
                      &lt;div id=&quot;collapse1&quot; class=&quot;panel-collapse collapse&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;heading1&quot; aria-expanded=&quot;false&quot; style=&quot;height:0px;&quot;&gt;
                          &lt;ul class=&quot;list-group choose&quot; id=&quot;candidate&quot;&gt;
                              &lt;li class=&quot;list-group-item&quot; id=&quot;candidate0&quot;&gt;
                                  &lt;a class=&quot;btn btn-sm btn-default&quot;&gt;
                                      &lt;i class=&quot;fa fa-lg fa-plus&quot;&gt;&lt;/i&gt;
                                  &lt;/a&gt;
                                  &lt;span style=&quot;font-size: 14px; margin-left:5px;&quot;&gt;First Name&lt;/span&gt;
                              &lt;/li&gt;
                              &lt;li class=&quot;list-group-item&quot; id=&quot;candidate1&quot;&gt;
                                  &lt;a class=&quot;btn btn-sm btn-default&quot;&gt;
                                      &lt;i class=&quot;fa fa-lg fa-plus&quot;&gt;&lt;/i&gt;
                                  &lt;/a&gt;
                                  &lt;span style=&quot;font-size: 14px; margin-left:5px;&quot;&gt;Last Name&lt;/span&gt;
                              &lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;?php $counter = 2; ?&gt;
              &lt;?php foreach ($mergedTests as $test): ?&gt;
                  &lt;?php $count=0 ?&gt;
                  &lt;div class=&quot;panel-group&quot; id=&quot;accordion&quot; role=&quot;tablist&quot; aria-multiselectable=&quot;true&quot; style=&quot;margin-top:-10px;&quot;&gt;
                      &lt;div class=&quot;panel panel-default&quot;&gt;
                          &lt;div class=&quot;panel-heading&quot; id=&quot;heading&lt;?php echo $counter; ?&gt;&quot; role=&quot;tab&quot;&gt;
                              &lt;h4 class=&quot;panel-title&quot;&gt;
                                  &lt;a role=&quot;button&quot; data-toggle=&quot;collapse&quot; data-parent=&quot;#accordion&quot; href=&quot;#collapse&lt;?php echo $counter; ?&gt;&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;collapse&lt;?php echo $counter; ?&gt;&quot; class=&quot;collapsed&quot;&gt;
                                  &lt;span style=&quot;font-size: 16px;&quot;&gt;&lt;?php if( ! $test-&gt;example ): ?&gt;&lt;?php echo $test-&gt;example;  ?&gt; Data&lt;?php else: ?&gt;&lt;?php echo $test-&gt;example; ?&gt; Data&lt;?php endif; ?&gt;&lt;/span&gt;
                                  &lt;/a&gt;
                              &lt;/h4&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;?php $label = explode(&quot;,&quot;, $test-&gt;subtestLabel); ?&gt;
                      &lt;div id=&quot;collapse&lt;?php echo $counter; ?&gt;&quot; class=&quot;panel-collapse collapse&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;heading&lt;?php echo $counter; ?&gt;&quot; aria-expanded=&quot;false&quot; style=&quot;height:0px;&quot;&gt;
                          &lt;ul class=&quot;list-group&quot; id=&quot;&lt;?php echo $test-&gt;subTestAbbreviation; ?&gt;&quot;&gt;
                              &lt;?php if ( ! $test-&gt;testMakerTestId) : ?&gt;
                                  &lt;?php foreach($label as $category): ?&gt;
                                      &lt;li class=&quot;list-group-item&quot; id=&quot;&lt;?php echo $test-&gt;example; ?&gt;&lt;?php echo $count; ?&gt;&quot; &gt;
                                          &lt;a class=&quot;btn btn-sm btn-default&quot;&gt;
                                              &lt;i class=&quot;fa fa-lg fa-plus&quot;&gt;&lt;/i&gt;
                                          &lt;/a&gt;
                                          &lt;span  style=&quot;font-size: 14px; margin-left:5px;&quot;&gt;&lt;?php echo $test-&gt;example; ?&gt; &lt;?php echo $category; ?&gt;&lt;/span&gt;
                                      &lt;/li&gt;
                                      &lt;?php $count++; ?&gt;
                                  &lt;?php endforeach; ?&gt;
                              &lt;?php else: ?&gt;
                                  &lt;li class=&quot;list-group-item&quot; id=&quot;&lt;?php echo $test-&gt;subTestAbbreviation; ?&gt;0&quot;&gt;
                                      &lt;a class=&quot;btn btn-sm btn-default&quot;&gt;
                                          &lt;i class=&quot;fa fa-lg fa-plus&quot;&gt;&lt;/i&gt;
                                      &lt;/a&gt;
                                      &lt;span style=&quot;font-size: 14px; margin-left:5px;&quot;&gt;&lt;?php echo $test-&gt;example; ?&gt; Raw Score&lt;/span&gt;
                                  &lt;/li&gt;
                                  &lt;li class=&quot;list-group-item&quot; id=&quot;&lt;?php echo $test-&gt;subTestAbbreviation; ?&gt;1&quot;&gt;
                                      &lt;a class=&quot;btn btn-sm btn-default&quot;&gt;
                                          &lt;i class=&quot;fa fa-lg fa-plus&quot;&gt;&lt;/i&gt;
                                      &lt;/a&gt;
                                      &lt;span style=&quot;font-size: 14px; margin-left:5px;&quot;&gt;&lt;?php echo $test-&gt;example; ?&gt; Percentile&lt;/span&gt;
                                  &lt;/li&gt;
                              &lt;?php endif; ?&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;?php $counter++; ?&gt;
              &lt;?php endforeach; ?&gt;
          &lt;/div&gt;
          &lt;div class=&quot;col-md-6&quot;&gt;
              &lt;h1&gt;Arrange Your Columns:&lt;/h1&gt;
              &lt;ul class=&quot;list-group ui-sortable&quot; id=&quot;selectedColumns&quot;&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>And my JQuery attempt so far:</p>
  <pre><code>$('li a').click(function(){
      var parentId = $(this).parent().attr('id');
      $(this).find($(&quot;.fa&quot;)).removeClass('fa-plus').addClass('fa-minus');
      $(&quot;#selectedColumns&quot;).append($(&quot;#&quot; + parentId));
  });
  
  //  Move selection from Arrange Your Columns back to Choose Your Columns
  $('ul#selectedColumns').click(function(){
      var parentId = $(this).parent().attr(&quot;id&quot;);
      console.log(parentId);
      transferId = parentId.slice(0, -1);
      $(&quot;#&quot; + parentId).find($(&quot;.fa&quot;)).removeClass('fa-minus').addClass('fa-plus');
      $(&quot;#&quot; + transferId).append($(&quot;#&quot; + parentId));
  });
  </code></pre>
  <p>Any help would be greatly appreciated.</p>