title: More efficient method than .empty() to avoid duplicates when populating <ul>
body: <p>I am creating a form. I am trying to build a list which is dynamically populated with items representing valueless input fields from this form. I have created a simplified version in a fiddle to illustrate my issue. Essentially, I have the error list being created as I want. It successfully counts blank input fields and updates this count when data is entered or deleted and populates the list accordingly. However, to avoid duplicate entries in this list I am currently emptying it on each call. This seems fairly inefficient and, as you see on the fiddle, it runs it's empty and build functions immediately after a blur, so if an input is in focus and one attempts to click an error link, it takes a couple of clicks before it scrolls to the empty input in question. So my question is, is there another way I can avoid duplicate entries and it run fast enough so that it can fun the scroll function on click immediately from focus?</p>
  
  <p>I hope this is clear enough. I added some white space to allow for a scroll effect so you can witness the multiple clicks required before the scroll occurs).</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function(){
  
    var submit = $('input[type="submit"]');
    var monday = $("input[name='MONDAY']");
    var tuesday = $("input[name='TUESDAY']");
    var wednesday = $("input[name='WEDNESDAY']");
    
    $('input').eq(0).focus();
    
    // disable submit 
    submit.attr("disabled", true);
    
    // call formValidate on load and on input blur
    formValidate();
    $('input').blur(function(){
      formValidate();
    });
    
    function formValidate(){
        // inputs 
        monday = $("input[name='MONDAY']");
        tuesday = $("input[name='TUESDAY']");
        wednesday = $("input[name='WEDNESDAY']");
        
        // store values of inputs in vars
        var inputCheck = {
            'monday':       monday.val(),
            'tuesday':      tuesday.val(),
            'wednesday':    wednesday.val()
        };
  
        var myErrors = [];
  
        myErrors.splice(0,myErrors.length);
        
        // if input has no value, add to error array
        $.each( inputCheck, function(key, value){
            if (value === '') {
               myErrors.push(key);
            }
        });
        
        // if any errors, create li for each
        if (myErrors.length &gt; 0 ) {
        
            // display errors div
            $('.errors').addClass('exist');
            $('.errors').find('span').html(myErrors.length);
            
            // empty ul to avoid duplicate entries
            $('.error-box-item ul').empty();
            
            // populate ul with any errors
            $.each(myErrors, function(i) {
              var li = $('&lt;li&gt;');
              var link = myErrors[i].replace("-", " ");
              var formattedLink = toTitleCase(link);
              var tag = "#err-" + myErrors[i];
              var a = $('&lt;a&gt;&lt;/a&gt;').attr("href", tag);
              a.append(formattedLink);
              li.append(a);
              $('.error-box-item ul').append(li);
  
            });
        } else {
        
            // if no errors, hide error info and 
            // enable the submit button
            $('.errors').removeClass('exist');
            submit.attr("disabled", false);
        }
  
    } // end validate form
  
    function toTitleCase(str) {
      return str.replace(/(?:^|\s)\w/g, function(match) {
        return match.toUpperCase();
      });
    }
    
      
    // scroll to link
    $('a[href*="#"]:not([href="#"])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') &amp;&amp; location.hostname == this.hostname) {
          var target = $(this.hash);
          target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
          if (target.length) {
            $('html, body').animate({
              scrollTop: target.offset().top - 50
            }, 500);
            return false;
          }
        }
      }); // end scroll 
      
  }); // end ready  </code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.errors {
  display: none;
  }
  .errors.exist {
  display: block;
  }
  .demo-space {
  height: 150px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;form&gt;
    &lt;p&gt;Monday:&lt;/p&gt;
    &lt;input id="err-monday" type="number" name="MONDAY"&gt;
    &lt;p&gt;Tuesday:&lt;/p&gt;
    &lt;input id="err-tuesday" type="number" name="TUESDAY"&gt;
    &lt;p&gt;Wednesday:&lt;/p&gt;
    &lt;input id="err-wednesday" type="number" name="WEDNESDAY"&gt;
    &lt;p&gt;
      &lt;input type="submit" name="submit" value="submit"&gt;
    &lt;/p&gt;
  &lt;/form&gt;
  &lt;div class="demo-space"&gt;&lt;/div&gt;
  &lt;div class="errors"&gt;
    You have &lt;span&gt;&lt;/span&gt; errors:
    &lt;div class="error-box-item"&gt;
      &lt;ul class="list"&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="demo-space"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>