title: Append HTML to div using jQuery when content is duplicated via JS
body: <p>I'm appending some HTML from another div created via JavaScript - the first time I append the HTML everything works fine, but when I append the HTML again it adds the content twice, I guess because it's appending the HTML from both divs created via JS, and if I append it again it adds three copies, then four etc.</p>
  
  <p>I've created a JSFiddle to show the problem: <a href="https://jsfiddle.net/49q0369a/" rel="nofollow noreferrer">https://jsfiddle.net/49q0369a/</a></p>
  
  <p>1.) Click "Pricing Per Night"</p>
  
  <p>2.) Click "Seasonal Pricing"</p>
  
  <p>3.) Click "Add Seasonal Price Filter" and then "Add Price Rule" (everything is working fine here)</p>
  
  <p>4.) Click "Add Seasonal Price Filter" and then "Add Price Rule" again (still working fine)</p>
  
  <p>5.) Now for the first "Seasonal Filter #1" click "Add Price Rule" again and you'll see it adds two price rule divs instead of one (this is the problem, is should always only add one)</p>
  
  <p>The function which adds the price rule:</p>
  
  <pre><code>function add_price_rule() {
          $(".add-price-rule").on( "click", function() {
              $(this).parent().find(".price-rule-wrapper-outer").append($(".price-rule-wrapper").html());
              remove_price_rule();
              recacluclate();
          });
      }
  </code></pre>
  
  <p>Any direction as to how to solve this appreciated!</p>