Need help in moving divs to another div after an onclick function
<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>