Recently, I've been working on a website project where I'm utilizing the Firebase Realtime Database to retrieve user-inserted data and display it as Bootstrap Cards, just like in these images:
Firebase Realtime Database - 1st card
Firebase Realtime Database - 2nd card
However, I'm currently facing a challenge that I'm struggling to resolve.
I've been attempting to dynamically insert the remaining data fetched from the Firebase Realtime Database into a Bootstrap Modal in order to prevent overcrowding the website's interface, but so far, I haven't been successful.
For instance, when I click on the first card, instead of seeing the test message "Hello" that I printed to check if the Modal text was functioning, I would like to see inside the Bootstrap Modal: Injured: "1-3". And if I click on the second card, rather than the test message "Hello," I wish to see within the Modal: "Description: Testing."
To provide further context, I have created a JSFiddle containing all of my code => JSFiddle
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body>
...
</body>
</html>
JS:
import { db, auth, firebaseRef, firebaseConfig, child, get, ref } from './firebase.js'
...
If you require any additional code snippets, please let me know. Thank you!