ドラッグ&ドロップした後のデータのみをDBに保存したい

Question

前提・実現したいこと

アルバイトのシフト作成のアプリを作っています。
DBに保存されたデータをjsを使い繰り返し処理されているdiv要素をshift_tableのtdの中にドラッグ&ドロップができるようにしました。

その上でドロップした要素はdiv要素なのでこの中にある文字列をDBに保存したい。

発生している問題・エラーメッセージ

ドロップした後にそのコードを見てみると

<td id="shift_num1" ondragover="onDragOver(event);" ondrop="onDrop(event);">
 <div id="human1" class="employee_name" draggable="true" ondragstart="onDragStart(event);">
                田中　ひろし
 </div>
</td>

このようになっており、divの中に保存したい値が入ってしまいます。

該当のソースコード

<div class="shift_main">
  <%= params[:date_save] %>
  <div class="shift_set">
    <%= form_with(model: @form, url: root_path, local: true) do |form| %>
      <table class="shift_table">
        <tbody class="shift_table_body">
          <tr class="shift_line">
            <td id="shift_num1" ondragover="onDragOver(event);" ondrop="onDrop(event);"></td>
            <td id="shift_num2" ondragover="onDragOver(event);" ondrop="onDrop(event);"></td>
          </tr>
          <tr class="shift_line">
            <td id="shift_num3" ondragover="onDragOver(event);" ondrop="onDrop(event);"></td>
            <td id="shift_num4" ondragover="onDragOver(event);" ondrop="onDrop(event);"></td>
          </tr>
          <tr class="shift_line">
            <td id="shift_num5" ondragover="onDragOver(event);" ondrop="onDrop(event);"></td>
            <td id="shift_num6" ondragover="onDragOver(event);" ondrop="onDrop(event);"></td>
          </tr>
          <tr class="shift_line">
            <td id="shift_num7" ondragover="onDragOver(event);" ondrop="onDrop(event);"></td>
            <td id="shift_num8" ondragover="onDragOver(event);" ondrop="onDrop(event);"></td>
          </tr>
          <tr class="shift_line">
            <td id="shift_num9" ondragover="onDragOver(event);" ondrop="onDrop(event);"></td>
            <td id="shift_num10" ondragover="onDragOver(event);" ondrop="onDrop(event);"></td>
          </tr>
          <tr class="shift_line">
            <td id="shift_num11" ondragover="onDragOver(event);" ondrop="onDrop(event);"></td>
            <td id="shift_num12" ondragover="onDragOver(event);" ondrop="onDrop(event);"></td>
          </tr>
          <tr class="shift_line">
            <td id="shift_num13" ondragover="onDragOver(event);" ondrop="onDrop(event);"></td>
            <td id="shift_num14" ondragover="onDragOver(event);" ondrop="onDrop(event);"></td>
          </tr>
          <tr class="shift_line">
            <td id="shift_num15" ondragover="onDragOver(event);" ondrop="onDrop(event);"></td>
            <td id="shift_num16" ondragover="onDragOver(event);" ondrop="onDrop(event);"></td>
          </tr>
          <tr class="shift_line">
            <td id="shift_num17" ondragover="onDragOver(event);" ondrop="onDrop(event);"></td>
            <td id="shift_num18" ondragover="onDragOver(event);" ondrop="onDrop(event);"></td>
            </tr>
          <tr class="shift_line">
            <td id="shift_num19"  ondragover="onDragOver(event);" ondrop="onDrop(event);"></td>
            <td id="shift_num20" ondragover="onDragOver(event);" ondrop="onDrop(event);"></td>
          </tr>
        </tbody>
      </table>
    <% end %>
    <table>
      <tbody>
        <% @num.each do |day| %>
          <tr>
            <td class="employee">
              <div id="human1" class="employee_name" draggable="true" ondragstart="onDragStart(event);">
                <%= day.name %>
              </div>
            </td>
          </tr>
        <% end %>
      </tbody>
    </table>
  </div>
</div>
<script type="text/javascript">
function onDragStart(event)
{
    const nodes = Array.from(document.querySelectorAll(".employee_name"));
    const index = nodes.findIndex(v=>v===event.target);
    event.dataTransfer.setData('text/plain', index);
}


function onDragOver(event) {
  event.preventDefault();
}

function onDrop(event)
{
    event.preventDefault();
    const index = event.dataTransfer.getData('text');
    const draggableElement = document.querySelectorAll(".employee_name")[index];
    const dropzone = event.currentTarget;
    dropzone.appendChild(draggableElement);
}
</script>

試したこと

現状form_withを使っての保存を考えています。

form_with及びfields_forを使って保存するためのコード
f.hidden_field
に対してidを付与してその中にjsを使って入れ込むことができないかと試しましたがうまくいきませんでした。

補足情報（FW/ツールのバージョンなど）

Rubyのバージョンは6.0.0です。

また、コントローラーの記載が今回必要かどうかの判断ができなかったので、こちらに記載させていただきます。

class ShiftController < ApplicationController
  def index
  end

  def new
    @shift = Shift.new
  end

  def create
    @user_days = Day.where(shift_date: params[:date_save], ok_id: 2)
    @num = []
    @user_days.each do |name|
      @num << User.find(name.user_id)
    end
  end

  def edit
  end

  private
  def shift_params
    params.require(:shift).merge(user_id: params[:user_id], ok_id: params[:ok_id], shift_date: params[:shift_date])
  end
end

初学者にて質問に至らない点もあるかと思いますが、追記などはすぐに対応できるようにしますので、お答えいただけると幸いです。