title: Why is my function appending to all elements it has previously appended to?
body: <p>I have the following code:</p>
  
  <pre><code>// Show a popup box and return the value
  function showPopup(callback) {
      $('.modal').show();
      $('.save').on('click', () =&gt; {
          $('.modal').hide();
          callback($('input').val());
      });
  }
  
  // Add a new option to a select element
  function addToDropdown(dropdownSelector) {
      showPopup((newValue) =&gt; {
          $(dropdownSelector).append(
              `&lt;option value=${newValue}&gt;${newValue}&lt;/option&gt;`
          );
      });
  }
  
  $('#btn1').on('click', () =&gt; {
      addToDropdown('#select1');
  });
  
  $('#btn2').on('click', () =&gt; {
      addToDropdown('#select2');
  });
  </code></pre>
  
  <p>When I click <code>#btn1</code> and enter a new value, it is added to <code>#select1</code>.</p>
  
  <p>Then I click <code>#btn2</code> and enter a new value, it is added to <code>#select1</code> and <code>#select2</code>.</p>
  
  <p>Then if I click <code>#btn1</code> and enter a new value, it is added to <code>#select1</code> twice and <code>#select2</code>.</p>
  
  <p>Why is this happening? It's like the function is being called for each time it's been called in the past. </p>