title: Jquery: How do I stop the appending of my text onClick?
body: <p>I am trying to stop this >> <a href="http://jsfiddle.net/justmelat/8x2WX/" rel="nofollow">http://jsfiddle.net/justmelat/8x2WX/</a></p>
  
  <p>if you look at my jsfiddle, click on the required fields button, click it again.  You will see that it keeps appending [which is what the code is asking it to do] the fields that are empty.  </p>
  
  <p>What is a better way to do this? If user happens to click on button twice or as they are filling in the form and testing to see what is left, I want it to restart the display of validated text, not append. I tried text() and html(), but they don't work correctly.</p>
  
  <pre><code>$("#section-11,#section-12,#section-13,#section-1011").hide();
  
  var projtype = new Array(
          {value : 'Cars', sect_id : 'fieldset#section-11'},
          {value : 'Planes', sect_id : 'fieldset#section-12'},
          {value : 'Boats', sect_id : 'fieldset#section-13'}
      );
  $("select#1169").on('change',function () {
  var thisVal = $(this).val();
   var sect_id ="";
       //$('fieldset[id!="mainSection"]').hide();
      $(projtype).each(function() {
  $(this.sect_id).hide();
          if(this.value == thisVal) {
          $(this.sect_id).show();
          }
      });        
  });
  
  $("#btnCatchReqFlds").on('click', function() {
      //$("#holdErrMsg").append(" ");
      var requiredButEmpty = $("fieldset:visible").find('input[class*="-required"], select[class*="-required"]').filter(function() {
        return $.trim($(this).val()) === "";  
      });
      if (requiredButEmpty.length) {
          requiredButEmpty.each(function () {
  
              $("#holdErrMsg").append("Please fill in the " + this.name + "&lt;br /&gt;");
          });
      }
      return !requiredButEmpty.length;
  });
  </code></pre>