For loop and Popup with liquid and jekyll

Question

I want to create a list of modal popups with a for-loop, each of them displaying different text. The site is created with Jekyll with the Liquid templating engine.

In particular, I want to create the list of my scientific publications, for each of them with 2 icons: one for the bibtex entry and one for the abstract. This information is stored in a yaml file.

I m following this simple tutorial for modal popups.

The popups work, but the text is the same for all the entries. How is possible to generate independent modal popups?

This is the html

{% for papers in papers %}
  {% for content in paper.papers %}
    <a title="{{content.name}}"><i class='{{content.icon}}' data-modal-target="#modal"></i></a>
    <div class="modal" id="modal">
      <div class="modal-header">
        <div class="title">{{content.name}}</div>
        <button data-close-button class="close-button">&times;</button>
      </div>

      <!-- text to display -->
      <div class="modal-body">{{content.text}}</div>
    </div>
  {% endfor %}
{% endfor %}

and this is the Javascript code:

const openModalIcons = document.querySelectorAll('[data-modal-target]')
const closeModalButtons = document.querySelectorAll('[data-close-button]')
const overlay = document.getElementById('overlay')

openModalIcons.forEach(icon => {
    icon.addEventListener('click', () => {
        const modal = document.querySelector(icon.dataset.modalTarget)
        openModal(modal)
    })
})

function openModal(modal) {
    if (modal == null) return
    modal.classList.add('active')
    overlay.classList.add('active')
}

closeModalButtons.forEach(button => {
    button.addEventListener('click', () => {
        const modal = button.closest('.modal')
        closeModal(modal)
    })
})

function closeModal(modal) {
    if (modal == null) return
    modal.classList.remove('active')
    overlay.classList.remove('active')
}

overlay.addEventListener('click', () => {
    const modals = document.querySelectorAll('.modal.active')
    modals.forEach(modal => {
        closeModal(modal)
    })
})

Answer 1

The problem is that all your modals have id="modal", so the selector #modal is probably always selecting the first one. The id attribute should be unique in the entire document.

Something like this should work:

{% for papers in papers %}
  {% for content in paper.papers %}
    <a title="{{content.name}}"><i class='{{content.icon}}' data-modal-target="#paperModal{{forloop.parentloop.counter}}_{{forloop.counter}}"></i></a>
    <div class="modal" id="paperModal{{forloop.parentloop.counter}}_{{forloop.counter}}">
      <div class="modal-header">
        <div class="title">{{content.name}}</div>
        <button data-close-button class="close-button">&times;</button>
      </div>

      <!-- text to display -->
      <div class="modal-body">{{content.text}}</div>
    </div>
  {% endfor %}
{% endfor %}

Instead of the for loop counter, you could also use the paper name as the ID (as long as it's unique), e.g. id="paperModal_{{content.name | slugify}}".

Edit: Edited the snippet to use forloop.counter and account for the nested for loop.