title: addEventListener duplicating Select Options Javascript
body: <p>I created a javascript function to copy data from an input on another <code>jQuery</code> tab to a Summary tab. I am having an issue with duplication with a dropdown.  </p>
  
  <p>I need for it to replace the exisiting information when choosing another selection if a change is needed.
  <br/><br/>
  <b>HTML - Dropdown</b></p>
  
  <pre><code>&lt;select id="accountCoordinator1" class="txtbxList"&gt;
    &lt;option&gt;Select&lt;/option&gt;
    &lt;option&gt;Jon&lt;/option&gt;
    &lt;option&gt;Lori&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p><br/><br/>
  <b>HTML - Placement</b></p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;
          &lt;td id="summaryAccountCoordinator1"&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><br/><br/>
  <b>JavaScript</b></p>
  
  <pre><code>(function(){
  
  $(document).ready(function () {
      if (window.addEventListener) {
          document.getElementById("accountCoordinator1").addEventListener("change", accountCoordinator1GV, false);
  
      } else if (window.attachEvent) {
          document.getElementById("accountCoordinator1").attachEvent("change", accountCoordinator1GV);
      }
  });
  
  var accountCoordinator1GV = function () {
      var accountCoordinator1GV = $("#accountCoordinator1").val();
      var ac1DIV = $("&lt;h3&gt;Account Coordinator&lt;/h3&gt;" + "&lt;div class='summaryDIV'&gt;" + accountCoordinator1GV + "&lt;/div&gt;");
      $("#summaryAccountCoordinator1").append(ac1DIV);
  };
  
  });
  </code></pre>