add multiple submitters input form

app/views/submissions/new.html.erb

@@ -6,35 +6,34 @@
         <%= f.text_area :emails, required: true, class: 'base-textarea' %>
       </div>
     <% else %>
-      <table class="">
-        <thead>
-          <tr>
-            <% @template.submitters.each do |item| %>
-              <th class="w-1/2 text-left">
-                <%= item['name'] %>
-              </th>
-            <% end %>
-            <th>
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <% @template.submitters.each do |item| %>
-              <td>
-                <input type="hidden" name="submission[][submitters][][uuid]" value="<%= item['uuid'] %>" >
-                <input type="email" name="submission[][submitters][][email]" value="<%= item['email'] %>" required>
-              </td>
-            <% end %>
-            <td>
-              &times;
-            </td>
-          </tr>
-        </tbody>
-      </table>
-      <button>
-        + Add new
-      </button>
+      <dynamic-list class="space-y-4">
+        <div class="space-y-4">
+          <div class="card card-compact bg-base-200" data-targets="dynamic-list.items">
+            <div class="card-body">
+              <div class="absolute right-4 top-5">
+                <a href="#" data-action="click:dynamic-list#removeItem" class="block w-6 h-6 rounded-lg text-neutral-700 text-center bg-base-300 p-1 hidden hover:bg-neutral hover:text-white">
+                  <%= svg_icon('trash', class: 'w-4 h-4') %>
+                </a>
+              </div>
+              <div class="grid md:grid-cols-2 gap-4">
+                <% @template.submitters.each.with_index(1) do |item, index| %>
+                  <div class="form-control">
+                    <label class="label">
+                      <span class="label-text"> <%= item['name'] %></span>
+                    </label>
+                    <input type="hidden" name="submission[1][submitters][<%= index %>][uuid]" value="<%= item['uuid'] %>" >
+                    <input type="email" name="submission[1][submitters][<%= index %>][email]" value="<%= item['email'] %>" class="input input-sm input-bordered" placeholder="Email" required>
+                  </div>
+                <% end %>
+              </div>
+            </div>
+          </div>
+        </div>
+        <a href="#" class="btn btn-primary btn-sm w-full flex items-center justify-center" data-action="click:dynamic-list#addItem">
+          <%= svg_icon('user_plus', class: 'w-4 h-4') %>
+          <span>Add Recipient</span>
+        </a>
+      </dynamic-list>
     <% end %>
     <div class="form-control">
       <%= f.label :send_email, class: 'flex items-center cursor-pointer' do %>