title: How can you re-render a page from JavaScript/jQuery?
body: <p>I am not quite sure if that's the correct way to phrase it, but here is <a href="https://jsfiddle.net/yr9cn0rw/2/" rel="nofollow">my problem</a></p>
  
  <p>As you can see, pretty simple code:  </p>
  
  <pre><code>&lt;div class="first"&gt;&lt;/div&gt;
  &lt;div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>What I want to achieve is:  </p>
  
  <ol>
  <li>You click on the <code>div</code> with the <em>first</em> class, it will swap that class with the sibling element</li>
  <li>You click the sibling element, and it swaps it back, so you just swap classes around 2 elements</li>
  </ol>
  
  <p>The problem here is it works correctly only the first time, and the second time when the new element receives the class via <code>addClass</code>, jQuery doesn't recognize that it contains the class by the first page load? How can I resolve this?  </p>
  
  <p>P.S: I made a <code>console.log(111);</code> just to make sure, and sure enough it triggers ONLY when I click on the black <code>div</code> after the first swap (the one that SHOULD NOT have the <em>first</em> class anymore)</p>