scinote-web/app/views/steps/_form_checklists.html.erb

<div class="panel panel-default panel-step-attachment">
  <div class="panel-body">
    <div class="row checklist-name-container">
      <div class="col-xs-11">
        <%= ff.smart_text_area :name,
                               label: t('protocols.steps.new.checklist_name'),
                               class: 'checklist-name',
                               autofocus: true,
                               single_line: true,
                               placeholder: t('protocols.steps.new.checklist_name_placeholder'),
                               data: { 'atwho-edit' => '' } %>
      </div>
      <div class="col-xs-1 remove-container">
        <%= ff.remove_nested_fields_link do %>
          <span class="fas fa-times"></span>
        <% end %>
      </div>
    </div>
    <%= ff.label t("protocols.steps.new.checklist_items") %>
    <ul>
      <%= ff.nested_fields_for :checklist_items, ordered_checklist_items(ff.object) do |chkItems| %>
        <li>
          <div class="row">
            <span class="fas fa-circle handle-move pull-left"></span>
            <div class="row">
              <div class="col-xs-6">
                <%= chkItems.smart_text_area :text,
                                             autofocus: true,
                                             placeholder: t('protocols.steps.new.checklist_item_placeholder'),
                                             hide_label: true,
                                             class: 'checklist-item-text form-control',
                                             single_line: true,
                                             data: { 'atwho-edit' => '' } %>
                <%= chkItems.hidden_field :position, class: "checklist-item-pos" %>
              </div>
              <div class="col-xs-1">
                <div class="btn btn-link">
                  <%= chkItems.remove_nested_fields_link do %>
                    <span class="fas fa-times"></span>
                  <% end %>
                </div>
              </div>
            </div>
          </div>
        </li>
      <% end %>
    </ul>
    <%= ff.add_nested_fields_link :checklist_items do %>
      <span class="fas fa-plus"></span>
      <%= t("protocols.steps.new.checklist_add_item") %>
    <% end %>
  </div>
</div>