指定した行のデータを削除する

Question

###　リストの指定した行のデータを削除する

node.jsで買い物リストのwebアプリを作っています。
各データごとに削除ボタンを追加し、削除ボタンを押したら「〇〇を削除いたしますか？」というモーダルが浮かび上がり、再度削除ボタンを押せばデータが削除できるように設定いたしました。

しかし、２番目、３番目を削除しようとしても１番上のデータが削除されてしまいます。
調べてみてもどうにも糸口を見つけることが出来ず、皆様のお力をお借りできればと思います。

図解

１、トマト　　削除
２、にんじん　削除
３、ゴボウ　　削除

上記のように設定されているのですが、にんじん、ゴボウの横の削除ボタンを押してもトマトが削除されてしまいます。

該当のソースコード

削除ボタンのコードです。

<input type="submit" value="削除" class="delete-show">

削除確認画面のコードです。恐らくここに問題があります。

<div id="delete-form">
   <h2>"<%=item.name%>"を削除しますか？</h2>
   <form action="/delete/<%=item.id%>" method="post">
     <input type="submit" id="submit-btn" value='削除する'>
   </form>
</div>

node.jsのコードです。ご参考までに。

app.get('/delete/:id', (req, res) => {
  connection.query(
    'select * from items where id=?',
    [req.params.id],
    (error, results) => {
      res.render('delete.ejs', {item: results[0]});
    }
  );
});

app.post('/delete/:id', (req, res) => {
  connection.query(
    'delete from items where id = ?',
    [req.params.id],
    (error, results) => {
      res.redirect('/index');
    }
  );
});

モーダルの設定です。

$('.delete-show').click(function(){
          $('#delete-modal').fadeIn();
        });

試したこと　

モーダル（削除確認画面）抜きでは実現できたのですが、一旦確認画面を挟むと上手くいきませんでした...。恐らく確認画面内の「削除」ボタンのコードに問題があると思います。

Comments

[退会済みユーザー]

node.jsの`post`リクエストを処理する部分も記載してください。

[jijijijijij]

失礼いたしました。追記いたしました。

[退会済みユーザー]

`/index`ページでデータの一覧と削除ボタンのリストが表示され、削除ボタンをクリックすると画面遷移無しに削除確認モーダルが表示される認識であってますか？削除確認モーダルの中で`/delete`ページをiframeで開いているということでしょうか？

[jijijijijij]

前者の認識であっております。
削除ボタンを押しても画面遷移はなく、urlは‘/Index’のまま削除確認モーダルが表示される形です。

[退会済みユーザー]

削除確認モーダルの中身はiframeですか？それともJavaScriptで動的に生成していますか？

[退会済みユーザー]

試しにモーダル無しで似たような実装をしてみましたが、期待通りの動作となりました。
https://github.com/KazmaArakaki/Teratail/tree/288743
モーダルの`action`属性に適切な値が設定されていないのではないかと疑っています。

[jijijijijij]

削除モーダルはJavascriptで作成しております。iframeで設定すればページ遷移なく削除ボタンを実装できるでしょうか？
ありがとうございます！実際に参考にして変更してみましたところ、上手く削除ボタンと削除確認ボタンを実装することができました！詳細にコードも記載していただきまして本当にありがとうございます！！

[退会済みユーザー]

無事実装できたようでなによりです。回答なしで解決してしまったので、自己解決の方法をまとめて回答残して頂けると後学の方のためになるかと思います。
https://teratail.com/help#resolve-myself
削除モーダルをiframeで実装する場合window間で連携する必要があるので工夫が必要ですが、可能ではあります。まずはご自分で頑張ってみて詰まったらまた別の質問を作成してください。

[jijijijijij]

そうですね！回答を追記いたします。
本当にありがとうございました！

Answer 1

解決いたしました。NovisHubさん、ありがとうございます。

app.get('/delete/:id', (req, res) => {
  connection.query(
    'select * from items where id=?',
    [req.params.id],
    (error, results) => {
      res.render('delete.ejs', {item: results[0]});
    }
  );
});

app.post('/delete/:id', (req, res) => {
  connection.query(
    'delete from items where id = ?',
    [req.params.id],
    (error, results) => {
      res.redirect('/index');
    }
  );
});

  <div class="wrapper">
    <div class="container">
      <div class="delete-form">
        <h2>
         "<%=items.name%>"を本当に削除しますか?
        </h2>
        <form action="/delete/<%=items.id %>" method="post">
        <input type="submit" id="submit-btn" value="Delete">
        </form>
      </div>
    </div>
  </div>