title: jQuery find previous button by ID (which will have different names)
body: <p>Hey all I am trying to get the previous button so that I can change its text to something else once someone selects a value from a select box.</p>
  
  <pre><code>&lt;div class="input-group"&gt;
      &lt;div class="input-group-btn search-panel"&gt;
          &lt;button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"&gt;
              &lt;span id="search_concept"&gt;Type&lt;/span&gt; &lt;span class="caret"&gt;&lt;/span&gt;
          &lt;/button&gt;
          &lt;ul class="dropdown-menu" id="dd1" role="menu"&gt;
               &lt;li&gt;&lt;a href="#" data-info="blah1"&gt;For Sale&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href="#" data-info="blah1"&gt;Wanted&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="input-group-btn search-panel"&gt;
          &lt;button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"&gt;
              &lt;span id="search_concept"&gt;Location&lt;/span&gt; &lt;span class="caret"&gt;&lt;/span&gt;
          &lt;/button&gt;
          &lt;ul class="dropdown-menu" id="dd2" role="menu"&gt;
               &lt;li&gt;&lt;a href="#" data-info="somewhere"&gt;Somewhere&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href="#" data-info="elsewhere"&gt;Elsewhere&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;input type="text" class="form-control" name="x" placeholder="Search term..."&gt;
  &lt;/div&gt;
  
  $('.search-panel #dd1, .search-panel #dd2').find('a').click(function(e) {
      e.preventDefault();
      var param = $(this).data("info");
  
      $(this).prev().find('#search_concept').text($(this).text());
  });
  </code></pre>
  
  <p>So the click event starts from <strong>THIS</strong> which is the <strong>a href="#" data-info="blah1">[value here]&lt; /a></strong> tag. So I am trying to go back to the <strong>&lt; button></strong> tag so that I can change the text <strong>Type</strong> to whatever was selected.</p>
  
  <p>I've tried:</p>
  
  <pre><code>$(this).prev().find('#search_concept').text($(this).text());
  and
  $(this).prev().prev().find('#search_concept').text($(this).text());
  and
  $(this).prev().prev().children().find('#search_concept').text($(this).text());
  and
  $(this).prev().children().find('#search_concept').text($(this).text());
  </code></pre>
  
  <p>And I can't seem to find it....</p>
  
  <p><strong>fixed</strong></p>
  
  <pre><code>$('.search-panel #dd1, .search-panel #dd2').find('a').click(function(e) {
      e.preventDefault();
      var param = $(this).data("info");
  
      $(this).parents('.search-panel').find('button').html($(this).text() + ' &lt;span class="caret"&gt;&lt;/span&gt;');
  });
  </code></pre>