サーバとのやり取りを行い特定のリストを削除したい

Question

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
現在買い物リストアプリを作成しています。非同期での追加はできるようになりましたが、非同期での削除を行うことができません。
削除ボタンを押すとブラウザーに表示されているリストは消えますがリロードすると削除したところが復活してしまいます。また、コンソールにもエラーが表示されます。
問題・エラーが起きている画像をここにドラッグアンドドロップ。
https://i.gyazo.com/4766d0b4c627e834ebe5db0ce6df7e51.png
動画　
https://i.gyazo.com/9af2c604873ebddf171e459e6279fc14.mp4

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

エラーメッセージ
shopping.self-021b89f4c047630c99e17566cb93208d49fd6acb78ad1d1e3da49f4936dbbd44.js?body=1:60 Uncaught TypeError: Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'.
    at HTMLDivElement.<anonymous> (shopping.self-021b89f4c047630c99e17566cb93208d49fd6acb78ad1d1e3da49f4936dbbd44.js?body=1:60)
    at HTMLDivElement.dispatch (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:5227)
    at HTMLDivElement.elemData.handle (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:4879)
(anonymous) @ shopping.self-021b89f4c047630c99e17566cb93208d49fd6acb78ad1d1e3da49f4936dbbd44.js?body=1:60
dispatch @ jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:5227
elemData.handle @ jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:4879

localhost/:1 Form submission canceled because the form is not connected

ソースコード

shopping.js

$(function(){
//JavaScriptのdocumentにあたるのが、$（ドルマーク）です。$のあとにセレクタと呼ばれるHTMLの指定方法を記述することで、HTML要素が取得できます。	
	function buildHTML(shopping){
		let html =
			`<div class="product-list">
				<div class="product-name">
					${shopping.name}
				</div>
				<div class="note">
					${shopping.note}
				</div>
				<div class="date-addend">
					${shopping.created_at}
				</div>
				<form action= "/shoppings/${shopping.id}" method="post" "shopping_path" >
					<input type="hidden"  name="_method" value="delete" >
					<input type="submit" name="commit" value="削除" class="delete-button" data-disable-with="削除">
				</form>
			</div>`
		
			//<form acttion= "${shopping.id}" accept-charset="UTF-8" method="post">
						//<input type="submit" name="commit" value="削除" class="delete-button" data-disable-with="削除">
					//</form>
		return html;		
	}
	//フォームが送信されたら、イベントが発火するようにする
	$('.form').on('submit', function(e){
		//form要素のクラス属性が'.form'となっている。
		//フォームの送信についてonメソッドでイベントをセッティングする際は、form要素自体に設定する.
		e.preventDefault()
		//preventDefault()を使用してデフォルトのイベントを止める。
		let formData = new FormData(this);
		//new FormData(フォーム要素)とすることでFormDataを作成できる。
		let url = $(this).attr('action');
		//ここで、urlを定義する。
		//attrメソッドで要素が持つ指定属性の値を返す。actionを指定しており、属性の値を取得している。action属性にはフォームの送信先のurlの値が入っている。
		//これでリクエスト先のURLを定義。
		$.ajax({
			url: url,
			type: "POST",
			data: formData,
			dataType: 'json',
			processData: false,
    		contentType: false,
		})
		.done(function(data){
			let html = buildHTML(data);
			$('.main-list').append(html)
			$('.form')[0].reset();      
			$('.main-list').animate({ scrollTop: $('.main-list')[0].scrollHeight});
			$('.product-button').prop('disabled', false);
		})
		.fail(function(){
    	alert('error');
		});	
	});	

	$(".product-list").on("click",function() {
		$(this).remove();
		let formData = new FormData(this);
		let url = $(this).attr('action');
		$.ajax({
			url:url,
			type: 'POST', 
			data: formData,  
			dataType: 'json',
			processData: false,
			contentType: false
		})
		.done(function(data){
			let html = buildHTML(data);
			$('.main-list').append(html)
			$('.product-button').prop('disabled', false);
		})		
  	});
});

#routes.rb

Rails.application.routes.draw do
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
  root to: 'shoppings#index'
  resources :shoppings,only: [:index, :new, :create, :destroy]
end

#ShoppingsController

class ShoppingsController < ApplicationController
	def index
		@shoppings = Shopping.all
		@shopping = Shopping.new
	end	

	def create
		@shopping = Shopping.create(shopping_params)
		respond_to do |format|
			format.html { redirect_to root_path }
			format.json  
		end
	end	
	
	def destroy
		shopping = Shopping.find(params[:id])
		shopping.destroy
		respond_to do |format|
			format.html { redirect_to root_path }
			format.json  
		end
	end	
		
	private 
	def shopping_params
		params.require(:shopping).permit(:name, :note)
	end	
end

###index.html.haml

	.header-name
		買い物リスト

.main
	.left-side

	.main-list
		- @shoppings.each do |shopping|
			.product-list
				.product-name
					= shopping.name
				.note
					= shopping.note 
				.date-addend
					= shopping.created_at.strftime("%Y年%m月%d日 %H時%M分")
				= form_with model:shopping, method: :delete, local: true do |f|
					= f.submit '削除',class: 'delete-button'
						
	.right-side

.footer
	= form_with model: [@shopping], html: {class: "form"}, local: true do |f|
		= f.text_field :name, class: 'product-name', 'placeholder': '商品名'
		= f.text_field :note, class: 'product-note', 'placeholder': 'メモ'
		= f.submit '追加', class: 'product-button'

試したこと

removeを使用してDOMの要素は消せていますが、リクエストがサーバーにうまくやりとりがいっておらず、リロードすると戻ってしまいます。ajaxを記述しましたがエラーがおきてしまい、検索し実装しましたが対処がわからず質問させて頂きました。ご回答頂けると幸いです。

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

ここにより詳細な情報を記載してください。

Comments

[m.ts10806]

Ruby on Rails
のタグを追加してください。
サーバーサイドに依存しないとお考えでしたらブラウザに表示されたHTMLをご提示ください

[musashi6]

追記依頼ありがとうございます！