Create a Notion-like table with Ruby on Rails

Question

So, in my Ruby app I have a model "Event". In posts all the events are shown as a list. For now I have a pop-up window in which one can create a new event. All the new events are displayed on the bottom of parent div. But I wish to make something like a Notion table: while hovering on a certain line of table, user may create a new line in this certain place, with this certain position (the example is on the first picture). I have no clue of how to achieve this. I am now working on drag and drop sorting of the events, but that's still the main problem...

Here are the parts of my code:

class Event < ApplicationRecord
  belongs_to :post
end

class EventsController < ApplicationController
  def create
    @post = Post.find(params[:post_id])
    @event = @post.events.create(params[:event].permit(:name, :body, :date))
    redirect_to post_path(@post)
  end
  def destroy
    @post = Post.find(params[:post_id])
    @event = @post.events.find(params[:id])
    @event.destroy
    redirect_to post_path(@post)
  end
end

Partial that shows the event:

<div class="event">
    <div class="razdel"></div>
    <div class="eventinfo">
        <p class="event_date">
            <%= event.date %>
        </p>
        <div class="event_action">
            <h1 class="event_name">
                <%= event.name %>
            </h1>
            <% if user_signed_in? && current_user.id == @post.user_id  %>
                <p><%= link_to '✕', [event.post, event],
                    :confirm => 'Are you sure?',
                    :method => :delete %></p>
            <% end %>

        </div>
        <p class="event_content">
            <%= event.body %>
        </p>
    </div>
</div>

Partial that allows to create a new event:

<%= form_for([@post, @post.events.build]) do |f| %>
    <div class="field eve">
        <%= f.label :название %>
        <%= f.text_field :name, placeholder: "Название события", class: 'event_input' %>
    </div>
    <div class="field eve">
        <%= f.label :описание %>
        <%= f.text_area :body, placeholder: "Описание события", class: 'event_input' %>
    </div>
  <div class="field eve">
    <%= f.label :дата %>
    <%= f.text_field :date, placeholder: "Дата события", class: 'event_input' %>
  </div>
    <div class="actions">
        <%= f.submit 'сохранить', :class => 'submit-form', :id => 'but' %>
    </div>
<% end %>

Applied like this for now:

<div class="timeline">
  <div class="allevents">
    <%= render @post.events.select(&:persisted?) %>
  </div>
</div>

<div class="add_popup" id="popup">
  <div class="add">
    <% if user_signed_in? && current_user.id == @post.user_id  %>
      <div class="upper_popup">
        <p class="popup_title">Новое событие:</p>
        <div class="close_overlay" id="cls"></div>
      </div>
      <%= render "events/form" %>
    <% end %>
  </div>
</div>