form_for内にajaxのリンク付きボタンを設置したい場合、どのように記述するのが良いのでしょうか。
本来であれば

<%= form_for @ranking do |f| %>
        <%= f.text_area :title %>
        <%= button_to '500ポイント消費し、ランキング順位を追加する', add_ranking_path, class: 'btn btn-primary center-block', remote: true %>
<%= end %>

としたいのですが、そうするとリンクが無効になってしまいフォームが送信されてしまいます。
ボタンを押せば、Ajaxでtextareaがもう1つ増えるような仕組みにしたいです。
よろしくお願いします。

==追記
サイト内のランキング記事を編集するformのerbです。

<%= form_for(@ranking, html: {class: 'col-sm-12 col-xs-12'}) do |f| %>
    <div class="edit-rankingtop row">
      <div class="field col-sm-2 col-xs-12">
        <strong id="top_image_label">トップ画像</strong><br/>
        <% if @ranking.image.thumb %>
            <%= image_tag @ranking.image.thumb, size: '65', id: 'top_image_thumb' %>
        <% end %>
        <div class="field">
          <%= f.file_field :image %>
          <br>
          <%= f.hidden_field :image_cache %>
        </div>
      </div>
      <div class="field col-sm-10 col-xs-12">
        <%= f.label :title %>
        <br>
        <%= f.text_area :title, class: 'form-control', placeholder: '150文字以内に詰め込もう' %>
      </div>
      <br/>

      <div class="field">
        <%= f.hidden_field :user_id, :value => current_user.id %>
      </div>
      <div class="clearfix"></div>
    </div>
    <br/>
    <%= link_to '500ポイント消費し、ランキング順位を追加する', add_ranking_path(@ranking), class: 'btn btn-primary center-block', remote: true %>
    <div class="col-sm-10 col-xs-12 row">
      <div class="field col-sm-12">
    <% i = @ranking.posts_sum %>
       #--------------------------------
       #上のリンクを押されるとAjaxで@ranking.ranking_postsの値を＋１する。
       #同時に、元々第i位までしか編集できなかったランキングをi+1位まで編集できるように、
       #form内に新たな編集エリアを追加したい。
       #--------------------------------
        <%= f.fields_for :ranking_posts, @ranking.ranking_posts do |p| %>
            <br/>
            <h4>第<%= i %>位</h4>

            <%= p.hidden_field :rank, :value => i %>

            <div class="field">
              <%= p.label :title %>
              <%= p.text_field :title, class: 'form-control' %>
            </div>

            <div class="field">
              <%= p.label :description %>
              <%= p.text_area :description, class: 'form-control', id: 'edit' %>
            </div>

            <% i = i-1 %>
        <% end %>
      </div>

      <div class="actions col-sm-8 col-xs-12">
        <%= f.submit '投稿', :class => 'btn btn-success btn-block' %>
      </div>
      <% if @ranking.id %>
          <div class="col-sm-4 col-xs-12">
            <%= f.submit "削除", data: {confirm: 'このランキングを削除しますか？'}, :class => 'btn btn-danger btn-block' %>
          </div>
      <% end %>
    </div>
<% end %>

Rankingのモデル

class Ranking < ActiveRecord::Base
  belongs_to :user
  has_many :ranking_posts, dependent: :destroy
  accepts_nested_attributes_for :ranking_posts
end

RankingPostのモデル

class RankingPost < ActiveRecord::Base
  belongs_to :ranking
end

もともとランキングが３位までなく、３位までしか編集できなかったものを、ボタンをクリックすることによって、４位、５位とランキングが追加され、それに従い編集できるエリアも追加されるようにしたいです。