javascript - jQuery を使用して前の td 要素を表示する

Question

この種の質問が 100 億回も聞かれていることは知っています。

基本的に、ボタンがクリックされたときにのみレンダリングするテキスト フィールドがあります。

これが私のコードの外観です (Rails で Ruby を使用しているため、Ruby で記述されています)。また、これは部分的なコードであるため、このコードは 1 ページに何度も表示されます。

<td class=search-form-block>
  <%= form_tag({:controller => "foods", :action => "save_selected"}, method: "post") %>
  <%#= text_field_tag 'search_food_text_field', nil, data: { catcomplete_source: search_foods_path } %>

  <%= text_field_tag 'search_food_text_field', nil, data: { catcomplete_source: search_foods_path } %>

</td>
<td class=remove-td-center> <%= link_to "new food", nil,  {class: "new-food-button"} %>     </td>    

これは、ソースからのように見えるものです：

<td class=search-form-block>
  <form accept-charset="UTF-8" action="/foods/save_selected" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="nj7UzUO00UwgC0eeZk2GpZiKqz6PPTvLST1mINZCDR4=" /></div>

  <input data-catcomplete-source="/foods/search" id="search_food_text_field" name="search_food_text_field" type="text" />

</td>
<td class=remove-td-center> <a href="/meals/5" class="new-food-button">new food</a> </td> 

そして、これが私のjQueryで、動作すると予測したが動作しませんでした:

 $('.search-form-block').hide()

$('.new-food-button').click(function(e){
    e.preventDefault();
    $(this).prev('td').toggle();
}); 

私が抱えている問題は、トグルボタンを押すと、ページ上のすべてのフォームがトグルされることです。その特定のボタンのフォームのみをレンダリングしたい。