title: Need help in moving divs to another div after an onclick function
body: <p>I have a container holding four divs. After I click on one div, the remaining three neeed to be appended to another div. How can I achieve this?</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
      &lt;html lang="en"&gt;
      &lt;head&gt;
      &lt;title&gt;Week 4 Game&lt;/title&gt;
      &lt;link rel = "stylesheet" type = "text/css" href = "assets/css/reset.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="assets/css/style.css"&gt;
  
      &lt;!-- Added link to the jQuery Library --&gt;
      &lt;script src="https://code.jquery.com/jquery-2.2.3.js" integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4=" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src = "assets/javascript/game.js"&gt;      &lt;/script&gt;
  
      &lt;/head&gt;
      &lt;body&gt;
      &lt;div class = "characters"&gt;
      &lt;div class="charContainer darth"&gt;
          &lt;h2 id="c1"&gt;&lt;/h2&gt;
          &lt;img class="vade" src="assets/images/vader.jpg"&gt;
          &lt;p id="c1hp" data-hp = "120"&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="charContainer luke"&gt;
          &lt;h2 id="c2"&gt;&lt;/h2&gt;
          &lt;img class="skywalker" src="assets/images/luke.jpg"&gt;
          &lt;p id="c2hp" data-hp = "100"&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="charContainer won"&gt;
          &lt;h2 id="c3"&gt;&lt;/h2&gt;
          &lt;img class="obi" src="assets/images/obiwan.jpg"&gt;
          &lt;p id="c3hp" data-hp = "150"&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="charContainer maul"&gt;
          &lt;h2 id="c4"&gt;&lt;/h2&gt;
          &lt;img class="dmaul" src="assets/images/maul.png"&gt;
          &lt;p id="c4hp" data-hp = "180"&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="your"&gt;
      &lt;h2&gt;Your Character&lt;/h2&gt;
      &lt;!-- &lt;img class="dmaul" src="assets/images/maul.png"&gt; --&gt;
      &lt;/div&gt;
      &lt;div id="enemies"&gt;
      &lt;h2&gt;Enemies&lt;/h2&gt;
      &lt;!-- &lt;img class="dmaul" src="assets/images/maul.png"&gt; --&gt;
      &lt;/div&gt;
  
  
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>JQuery</p>
  
  <pre><code>    $(document).ready(function(){
         var yourCharacter;
         var enemy1;
         var enemy2;
         var enemy3;
        $('#c1').text("Darth Vader");
        $('#c2').text("Luke Skywalker");
        $('#c3').text("Obi Won");
        $('#c4').text("Darth Maul");
        var health = $('#c1hp').data('hp');
        $('#c1hp').html(health);
        var health = $('#c2hp').data('hp');
        $('#c2hp').html(health);
        var health = $('#c3hp').data('hp');
        $('#c3hp').html(health);
        var health = $('#c4hp').data('hp');
        $('#c4hp').html(health);
  
        $('.charContainer').on('click', function(){
        yourCharacter = $(this);
        $('#your').append(yourCharacter);
        enemy1 = $('.vader');
        $('#enemies').append(enemy1);
  
        })
  
        });
  </code></pre>
  
  <p>I need to append the remaind charContainers that were not clicked to the enemies container div</p>