javascript localstorage displays only first item

Question

I am trying to display localstorage data in bootstrap modal, but it shows item only from first array, how can i show data from array which is clicked? that is my website and github code which i am talking about: https://github.com/nodarchik/alliance-js https://nodarchik.github.io/alliance-js/

thats my code:

let data = [{}];

let acceptData = () => {
  data.push({
    fName: fName.value,
    lName: lName.value,
    address: address.value,
    date: date.value,
    gender: gender.value,
    textarea:textarea.value,
  });
  localStorage.setItem("data", JSON.stringify(data));
  createPost();
};

let createPost = () => {
  table.innerHTML = "";
  data.map((x,y) =>{
    return (table.innerHTML += `
    <tbody id=${y}>
      <tr class="grid">
        <td scope="col">${y+1}</td>
        <td scope="col">${x.fName}</td>
        <td scope="col">${x.lName}</td>
        <td scope="col">${x.address}</td>
        <td scope="col">${x.date}</td>
        <td scope="col">${x.gender}</td>

*        <div>
          <div class="modal fade" id="modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <div>Notes</div>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
              <div class="modal-body"> *
           
               ** <div scope="col">${x.textarea}</div>     **
        
              </div>
            </div>
          </div>
        </div>

*        <td scope="col" data-bs-toggle="modal" data-bs-target="#modal">Click to see</td>
        <td id="btnsize" type="button" class="btn btn-danger active m-1" onClick="deletePost(this);createPost()">Delete</td>*
      </tr>
    </tbody>
  `);
  });
  resetForm();
};

I tried to display localstorage data on table without modal and it is working perfectly.

Answer 1

Can you try to give a unique ID to the modal? When using multiple modals dynamically, we need to provide a unique id to all the modals, or it will always just open first modal with the provided ID

let createPost = () => {
  table.innerHTML = "";
  data.map((x,y) =>{
    return (table.innerHTML += `
    <tbody id=${y}>
      <tr class="grid">
        <td scope="col">${y+1}</td>
        <td scope="col">${x.fName}</td>
        <td scope="col">${x.lName}</td>
        <td scope="col">${x.address}</td>
        <td scope="col">${x.date}</td>
        <td scope="col">${x.gender}</td>

*        <div>
          <div class="modal fade" id="modal_${y}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <div>Notes</div>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
              <div class="modal-body"> *
           
               ** <div scope="col">${x.textarea}</div>     **
        
              </div>
            </div>
          </div>
        </div>

*        <td scope="col" data-bs-toggle="modal" data-bs-target="#modal_${y}">Click to see</td>
        <td id="btnsize" type="button" class="btn btn-danger active m-1" onClick="deletePost(this);createPost()">Delete</td>*
      </tr>
    </tbody>
  `);
  });
  resetForm();
};