title: Function breaks with generated buttons
body: <p>I'm building a jQuery function that allows users to add additional fields to a form. The form has four buttons, for different donation values. When you click on one, it generates the appropriate form fields, and adds an option for an additional donation. </p>
  
  <p>For some reason, the additional donation buttons don't work. The code for the buttons is exactly the same, so this makes no sense to me. </p>
  
  <p>Here's the HTML:</p>
  
  <pre><code>&lt;h6&gt;Donation Information&lt;/h6&gt;
  &lt;p&gt;
      &lt;a class="button" data-value="500" href="#" style="margin-right:2px;"&gt;5" &amp;ndash; $500&lt;/a&gt;
      &lt;a class="button" data-value="250" href="#" style="margin-right:2px;"&gt;4" &amp;ndash; $250&lt;/a&gt;
      &lt;a class="button" data-value="100" href="#"  style="margin-right:2px;"&gt;3" &amp;ndash; $100&lt;/a&gt;
      &lt;a class="button" data-value="50" href="#" style="padding-right:13px;"&gt;2.5" &amp;ndash; $50&lt;/a&gt;
  &lt;/p&gt;
  &lt;div id="donationTarget"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>And here's the jQuery:</p>
  
  <pre><code>$(".button").click(function(e) {
      e.preventDefault();
      if ($(this).hasClass("clicked")) {
          // do nothing
      } else if ($(this).hasClass("disabled")) {
          // do nothing
      } else {
          $(this).addClass("clicked");
          $(".button:not(.clicked)").addClass("disabled");
          var counter = $(".donation").length;
          var amount = $(this).attr("data-value");
          if (amount == 500) {
              var size = 5;
          } else if (amount == 250) {
              var size = 4;
          } else if (amount == 100) {
              var size = 3;
          } else if (amount == 50) {
              var size = 2.5;
          }
          $("#donationTarget").before("&lt;div class=\"donation\"&gt;&lt;input maxlength=\"60\" name=\"inscription" + counter + "\" placeholder=\"Inscription (60 character maximum)\" type=\"text\" /&gt;&lt;p&gt;&lt;strong&gt;Color Preference (subject to availability):&lt;/strong&gt;&lt;/p&gt;&lt;div class=\"half\"&gt;&lt;input id=\"color-blue" + counter + "\" type=\"radio\" name=\"color" + counter + "\" /&gt;&lt;label for=\"color-blue" + counter + "\"&gt;Blue&lt;/label&gt;&lt;div style=\"clear:both;\"&gt;&lt;/div&gt;&lt;input id=\"color-orange" + counter + "\" type=\"radio\" name=\"color" + counter + "\" /&gt;&lt;label for=\"color-orange" + counter + "\"&gt;Orange&lt;/label&gt;&lt;div style=\"clear:both;\"&gt;&lt;/div&gt;&lt;input id=\"color-red" + counter + "\" type=\"radio\" name=\"color" + counter + "\" /&gt;&lt;label for=\"color-red" + counter + "\"&gt;Red&lt;/label&gt;&lt;div style=\"clear:both;\"&gt;&lt;/div&gt;&lt;/div&gt;&lt;!--/.half--&gt;&lt;div class=\"half\"&gt;&lt;input id=\"color-yellow" + counter + "\" type=\"radio\" name=\"color" + counter + "\" /&gt;&lt;label for=\"color-yellow" + counter + "\"&gt;Yellow&lt;/label&gt;&lt;div style=\"clear:both;\"&gt;&lt;/div&gt;&lt;input id=\"color-green" + counter + "\" type=\"radio\" name=\"color" + counter + "\" /&gt;&lt;label for=\"color-green" + counter + "\"&gt;Green&lt;/label&gt;&lt;div style=\"clear:both;\"&gt;&lt;/div&gt;&lt;/div&gt;&lt;!--/.half--&gt;&lt;div style=\"clear:both;\"&gt;&lt;/div&gt;&lt;/div&gt;&lt;br /&gt;&lt;h6&gt;Additional Donation&lt;/h6&gt;&lt;p&gt;&lt;a class=\"button\" data-value=\"500\" href=\"#\" style=\"margin-right:2px;\"&gt;5\" &amp;ndash; $500&lt;/a&gt;&lt;a class=\"button\" data-value=\"250\" href=\"#\" style=\"margin-right:2px;\"&gt;4\" &amp;ndash; $250&lt;/a&gt;&lt;a class=\"button\" data-value=\"100\" href=\"#\"  style=\"margin-right:2px;\"&gt;3\" &amp;ndash; $100&lt;/a&gt;&lt;a class=\"button\" data-value=\"50\" href=\"#\" style=\"padding-right:13px;\"&gt;2.5\" &amp;ndash; $50&lt;/a&gt;&lt;/p&gt;");
      }
  });
  </code></pre>
  
  <p>Also, is there a way to clean up the super long line of jQuery towards the end of the function? I can't figure out how to keep the HTML on multiple lines without breaking the script.</p>
  
  <p>Thanks.</p>
  
  <p>jsFiddle: <a href="http://jsfiddle.net/aptwt/2/" rel="nofollow">http://jsfiddle.net/aptwt/2/</a></p>