どのボタンが押されたかによって挙動を分けたい

Question

前提・実現したいこと

• 要素1, 要素2という二つのformが同じ画面にある
• （略）とされている箇所で、ボタンが押されたときにJSで検索ボタンが押された方のformのデータを取得したい
• 現状だと、二つのフォームのデータが取得されてしまう
• 拡張性を持たせたいのそれぞれのformにidをつけて、それぞれ別の発火ポイントをなるべく用意したくない

該当のソースコード

<section class="panel">
    <header class="panel-heading">
    要素1
    </header>
    <div class="panel-body">
        <form>
            <textarea  name="userId" id="userId"></textarea>
            <button id="btn-userId" type="button" class="btn">検索</button>
        </form>
    </div>
</section>
<section class="panel">
    <header class="panel-heading">
    要素2
    </header>
    <div class="panel-body">
        <form>
            <textarea  name="userId2" id="userId2"></textarea>
            <button id="btn-userId2" type="button" class="btn">検索</button>
        </form>
    </div>
</section>

$('.btn').click(function () {

(略)

});

補足情報（FW/ツールのバージョンなど）

JQuery

よろしくお願いいたします。

Answer 1

formプロパティがあるためボタンがどのフォームに属しているかは簡単に取得できます

$('.btn').on('click', function(event) {
  console.log(event.target.form);
});

https://developer.mozilla.org/ja/docs/Web/API/HTMLButtonElement

Answer 2

$(function(){
  $('.btn').on('click',function(){
    console.log($(this).closest('form'));
  });
});

Answer 3

buttonタグのvalue属性の属性値にそのformの固有識別番号などをつければ良いかと。