title: jQuery getting closest html when I have to use the same IDs for forms
body: <p>Firstly I know I shouldn't have the same IDs, but in this case it unavoidable ... I am trying to click a button that will take the <code>.html()</code> of a <code>div</code> and add that text to an input field. Problem is that everything has the same IDs and there will be an unknown number of them.  Example is:</p>
  
  <pre><code>&lt;div id="Product"&gt;
      &lt;div id="Product-stats"&gt;&lt;div class="builder-name"&gt;Example Builder&lt;/div&gt;&lt;/div&gt;
      &lt;form&gt;&lt;input id="abc" value=-""&gt;&lt;/input&gt;&lt;/form&gt;
      &lt;a href="#" class="cart-get-quote-button"&gt;&lt;/a&gt;
  &lt;div&gt;
  
  &lt;div id="Product"&gt;
      &lt;div id="Product-stats"&gt;&lt;div class="builder-name"&gt;Another Builder&lt;/div&gt;&lt;/div&gt;
      &lt;form&gt;&lt;input id="abc" value=-""&gt;&lt;/input&gt;&lt;/form&gt;
      &lt;a href="#" class="cart-get-quote-button"&gt;&lt;/a&gt;
  &lt;div&gt;
  
  &lt;div id="Product"&gt;
      &lt;div id="Product-stats"&gt;&lt;div class="builder-name"&gt;Third Builder&lt;/div&gt;&lt;/div&gt;
      &lt;form&gt;&lt;input id="abc" value=-""&gt;&lt;/input&gt;&lt;/form&gt;
      &lt;a href="#" class="cart-get-quote-button"&gt;&lt;/a&gt;
  &lt;div&gt;
  </code></pre>
  
  <p>So I need to click each link and have the builder-name content copied to the relative input value, obviously I can get this to work with just one set, but not multiple, so I though maybe trying to use sibling? or closest? This is what I have that does not work</p>
  
  <pre><code>$(document).ready(function() {
      $('.cart-get-quote-button').on('click', function() {
          $(this).closest('input[id="abc"]').val($(this).closest('.builder-name').html());
      }); 
  });
  </code></pre>