title: Replace href on select change
body: <p>I have a select element with options with values that are some numbers (some id's).</p>
  
  <pre><code>&lt;select id="select"&gt;
      &lt;option value="21"&gt;Random&lt;option&gt;
      &lt;option value="23"&gt;Random 2&lt;option&gt;
      &lt;option value="25"&gt;Random 3&lt;option&gt;
      &lt;option value="27"&gt;Random 4&lt;option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>Next to it is a submit button that will preform some kind of submit.</p>
  
  <pre><code>&lt;a class="button" href="www.random.org"&gt;Click me!&lt;/a&gt;
  </code></pre>
  
  <p>I need to add the <code>?id=</code> to that link, with the id value of the select. I created the code, but the issue is that it just appends the <code>?id=</code> every time I change the select the option</p>
  
  <pre><code>var id;
  $('#select').on('change', function(){
      id = $(this).val();
      var new_href = $('.button').attr('href') + '?id=' + id;
      $('.button').attr('href', new_href);
  });
  </code></pre>
  
  <p>So when I click on first option I get, for the <code>href</code></p>
  
  <pre><code>www.random.org?id=21
  </code></pre>
  
  <p>But if I click on second one (or any for that matter) I get</p>
  
  <pre><code>www.random.org?id=21?id=23
  </code></pre>
  
  <p>It appends the id. How to 'clear' the previous id on change, and replace with the selected one? What am I doing wrong?</p>