タブごとに別の計算結果を表示させたい

前提・実現したいこと

開始時間と終了時間の入力をさせ、その差分によって金額を表示するフォームを作成しています。
railsとjQueryを使用しており、機能は以下のようなものです。
・タブ切り替えができる
・どのタブも同じ内容の計算フォームが表示される
・タブごとに時間入力でき、計算結果を表示させることができる

なお、計算フォームは部分テンプレートで切り出しています。

発生している問題・エラーメッセージ

それぞれのタブを、タブ①・タブ②・タブ③とすると、
タブ①のフォームで入力した数値は、うまく計算されて結果が表示されます。
しかし、その結果はタブ②・タブ③にも同じく表示されてしまい、タブ②で新しく計算することができません・

本来はタブごとに計算できるようにしたいので、困っています。

該当のソースコード

//html
<ul class="tabmenu">
  <li class="tab-btn active"><a href="#1">タブ①</a></li>
  <li class="tab-btn"><a href="#2">タブ②</a></li>
  <li class="tab-btn"><a href="#3">タブ③</a></li>
</ul>
<ul class="contents">
  <li class="content show" id="1"><%= render partial:'form'%></li>
  <li class="content" id="2"><%= render partial:'form'%></li>
  <li class="content" id="3"><%= render partial:'form'%></li>
</ul>

//部分テンプレート　_form
<span class="jikan">
  <form>
    <dl>
      <dt>開始時間</dt>
      <dd><input type="time" name="start_time" value="11:00"autofocus="true" required></dd>
      <dt>終了時間</dt>
      <dd><input type="time" name="last_time" value="11:00" required></dd>
    </dl>
    <button type="submit">計算</button>
  </form>
</span>
<span class="price">
  <p class="adult-price" ></p>
  <p class="student-price"></p>
</span>


$(function() {
  $('button').click(function(){
    //時間計算処理　時間差を変数xに代入しています
    ・
    ・
    if (x<=0){
      $('.adult-price').text('0円');
      $('.student-price').text('0円');
    }
    else if (x<=30){
      $('.adult-price').text('330円');
      $('.student-price').text('330円');
    }  
　　//以下省略
  });

　//タブ切り替えの記述
  $(".tabmenu a").click(function() {  //tabmenuクラスのクリックイベント
    $(this).parent().addClass("active").siblings(".active").removeClass("active"); //activeくラスを加え、同階層のactiveクラスを削除
    var tabContents = $(this).attr("href");　　//hrefのidを取得
    $(tabContents).addClass("show").siblings(".show").removeClass("show");　//showくラスを加え、同階層のshowクラスを削除
    return false;
  });
});