javascript - ロード時にフォームを表示する方法

Question

ロード時にフォームを表示する方法。ボタンをクリックするとフォーム フィールドが表示されるようになりました (キースキルを追加)。すべての機能を連携させたい.ロード時にフォームを表示し、「キースキルの追加」または「キースキルの削除」をクリックして追加および削除する必要があります(追加または削除をクリックすると機能しますが、表示されません)ロード時のフォーム、「キースキルの追加」をクリックするだけでフォームが表示されます）

$(function()
{
    function check_to_hide_or_show_add_key_skill_link()
    {
        if ($('#key_skills .nested-fields:visible').length == 4) {
            $('#key_skills .links a').hide();
        } else {
            $('#key_skills .links a').show();
        }
    }

    $('#key_skills').on('cocoon:after-insert', function()
    {
        check_to_hide_or_show_add_key_skill_link();
    });

    $('#key_skills').on('cocoon:after-remove', function()
    {
        check_to_hide_or_show_add_key_skill_link();
    });

    check_to_hide_or_show_add_key_skill_link();
});

マイ フォーム キー スキル*

<div id="key_skills">
  <%= f.simple_fields_for :key_skills do |key_skill| %>
    <div class="nested-fields">
      <div class="field">
        <%= f.input :name , input_html: { class: 'form-control keySkill', required: true }%>
          <%= f.input :relevant_experience, input_html: { class: 'form-control', required: true } %>
            <%= link_to_remove_association "Remove Skill", f %>
      </div>
    </div>
    <% end %>
      <div class="links">
        <%= link_to_add_association 'Add Key Skill', f, :key_skills, class: "links" %>
      </div>
</div>

これが現在の私の出力です。キースキルの追加をクリックするとフォームが表示されますが、ロード時に必要です)