modal crud pada tailwindcss

kan aku mau bikin modal crud pakai tailwind, nah tapi saat button editnya di klik ambil datanya belum dinamis, jadi misal klik edit data ke 2 tapi yang keganti data yang pertama. bagaimana ya solusinyasc codingan modalnya

Untuk membuat data menjadi dinamis, kamu perlu melewatkan ID data yang ingin kamu edit ke dalam modal. Kamu dapat melakukannya dengan menambahkan atribut ID pada elemen data dan kemudian melewatkan ID tersebut ke dalam atribut `data-id` pada modal. Contohnya:

```html
<table>
  <tbody>
    <tr>
      <td>1</td>
      <td>John Doe</td>
      <td>[email protected]</td>
      <td><button data-id="1">Edit</button></td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jane Doe</td>
      <td>[email protected]</td>
      <td><button data-id="2">Edit</button></td>
    </tr>
  </tbody>
</table>
```

Kemudian, kamu dapat menggunakan atribut `data-id` untuk mendapatkan ID dari data yang ingin diubah oleh pengguna. Contohnya:

```html
<div class="modal" id="edit-modal">
  <div class="modal-content">
    <h2>Edit Data</h2>
    <form action="/edit" method="post">
      <input type="hidden" name="id" value="{{ data.id }}">
      <input type="text" name="name" value="{{ data.name }}">
      <input type="email" name="email" value="{{ data.email }}">
      <button type="submit">Simpan</button>
    </form>
  </div>
</div>
```

Pada modal, kamu dapat menggunakan variabel `data.id` untuk mendapatkan ID dari data yang ingin diubah oleh pengguna. Kemudian, kamu dapat menggunakan ID tersebut untuk mengambil data dari database. Contohnya:

```javascript
function editData(event) {
  event.preventDefault();

  // Mendapatkan ID dari data yang ingin diubah oleh pengguna.
  const id = event.target.dataset.id;

  // Mengambil data dari database.
  const data = await axios.get(`/data/${id}`);

  // Render modal dengan data tersebut.
  ReactDOM.render(<EditModal data={data} />, document.getElementById("edit-modal"));
}
```

Kode ini akan mengambil data dari database dan kemudian merender modal dengan data tersebut. Pengguna dapat mengubah data di dalam modal dan mengklik tombol `Simpan` untuk menyimpan perubahan.