非同期通信でattributesした別テーブルのレコードを削除したい

フリマアプリのコピーを作成中です。
出品した商品の編集画面にて非同期にて商品の複数画像のうち1つずつ削除できるような機能を実装しております。
編集画面に行き、保存されている画像の下に削除ボタンを設置し押したら該当の画像のみ画面から削除できるようにしたいです。
現在実装した内容では削除を押した段階で出品した商品全てが削除されてしまうためアドバイスをいただきたいです。

該当のview
https://gyazo.com/c05c48d27c1ce301801a3889935c3709

haml
1.new-conteiner
2  = render 'shared/new_header'
3  .new-main
4    .new-main__box
5      %h2 商品の情報を入力
6      = form_for @product do |f|
7        .image
8          %h4 出品画像
9          .image__images
10            - @image.each_with_index do |i, index|
11              - if i.image_url.present?
12                .image__images__box{"data-image-id": "#{i.id}"}
13                  = image_tag(i.image_url.url, id: "product_image", class: "image-top imagemain#{index}", height: '120', width: '120')
14                  .delete_btn 削除

jQuery
1
2$( document ).on('turbolinks:load', function() {
3  $(function(){
4    $(".delete_btn").on('click', function(){
5      var deleteConfirm = confirm('削除してよろしいでしょうか？');
6
7      if(deleteConfirm == true) {
8        var clickEle = $(this)
9        var productEle = $(this).parent().parent().parent().parent(this);
10        var productUrl = productEle.attr('action')
11        var imageID = clickEle.parent().attr('data-image-id')
12
13        $.ajax({
14          url: productUrl,
15          type: 'POST',
16          data: {'id': imageID,
17                '_method': 'DELETE'}
18        })
19
20        .done(function(){
21          clickEle.parent('img').remove();
22        })
23
24        .fail(function(){
25          alert('エラー')
26        });
27      } else {
28        (function(e){
29          e.preventDefault()
30        });
31      };
32    });
33  });
34});