[jquery]同名複数あるclass名から$(this)を使って1つだけを取得したい

Question

前提・実現したいこと

ボタンを押すとセレクトボックスよりエリアを選択できリンク先に飛ぶという
webサイトのスマホ対応をしております。

同じデザインのボタンが2つありセレクトボックスのリンク先のみ違います。
動きは同じなので同クラス名を使用しjsを書きましたが2つ目のボタンをクリック
しても1つ目のセレクトボックス（先に記述のある同じクラス名が取得されている？）が選択されてしまいます。

クリックした隣の要素のselectを取得したいので
jqueryの $(this)を使用して取得をすれば良いのかな？と予想はできるのですが
クリックする要素とは違うので $(this)どのように記述したら良いのかでつまづいております。

どうぞよろしくお願いします。

HTML

<ul>
<li class="btn">
<a href="">
<img src="./images/btn.png" alt="エリアから探す"></a>
</li>
<li class="area-search-select">
<select>
<option value="https://xxx">北海道</option>
<option value="https://yyy">青森県</option>
<option value="https://zzz">岩手県</option>
</select>
</li>
</ul>

<ul>
<li class="btn">
<a href="">
<img src="./images/btn.png" alt="エリアから探す"></a>
</li>
<li class="area-search-select">
<select>
<option value="https://xxx02">北海道</option>
<option value="https://yyy02">青森県</option>
<option value="https://zzz02">岩手県</option>
</select>
</li>
</ul>

jquery

$(function(){
	$(document).on('blur','.area-search-select > select',function(){
		location.href = $(this).val();
	})

	$(document).on('click','.btn',function(){
		$('.area-search-select > select').focus();
		return false;
	})
});

試したこと

別のクラス名(btn01とbtn02/area-search-select01とarea-search-select02)をつけて回避はしておりますが今後数が増えた時に同じようなjqueryを複数書くことになるのでスマートではないと思っております。

Answer 1

$(function(){
  $(document).on('blur','.area-search-select > select',function(){
    //location.href = $(this).val();
    console.log($(this).val());
  });
  $(document).on('click','.btn',function(e){
    e.preventDefault();
    $(this).next('.area-search-select').find('> select').focus();
  })
});