分享使用多個Bootstrap彈跳視窗的問題

問題描述

1. 在編輯多個卡片時，若是先編輯完1個卡片後再用複製貼上做出其他卡片時，如https://codepen.io/Jefflin666/pen/OJXoPbw?editors=1000這支codepen內的程式
2. 點進去以上網址後再分別點擊兩張卡片的藍色按鈕(Detail Imformation)會發現彈出的視窗都是第一張卡片的資料，但明明在程式中就有輸入第二張卡片的資料

上圖彈出的視窗都是第一張卡片的資料

上圖程式中就有輸入第二張卡片的資料

如何解決問題

1. 分析問題

回到程式中，每個按鈕都有其指定的路徑如下圖

因為第二張卡片是由第一張複製來的，因此兩張卡片的按鈕路徑會一樣，造成了點擊第二張卡片的按鈕時會跑去第一張卡片的彈出視窗內容

2. 解決問題

修改第二張卡片的按鈕路徑成和第一張卡片的按鈕路徑不一樣，如下圖

如此一來就可以看到第二張卡片的內容了(附上修改後的codepen)

https://codepen.io/Jefflin666/pen/WNxgbWN?editors=1000