Link Popup Modal to correct script in loop Popup Closed Screenshot




Popup Open Screenshot


I have image that has multiple markers on it that can be clicked to bring up different popups. However, I need to some help refining the code to work properly and to link to the correct id tag. 

My template code:

{% set var = craft.entries.section('availablehomes').relatedTo(category).level(2) %}
{% for entry in var %}
&lt;!-- Popup Modal --&gt;
{% set plotPopup = 'plotPopup' ~ entry.title|camel %}
&lt;div class="property popup" id="{{ plotPopup }}"&gt;
....markup.......
&lt;/div&gt;
{% endfor %}


Which outputs

&lt;div class="property popup" id="plotPopupplot1"&gt;...&lt;/div&gt;
&lt;div class="property popup" id="plotPopupplot2"&gt;...&lt;/div&gt;
&lt;div class="property popup" id="plotPopupplot3"&gt;...&lt;/div&gt;
&lt;div class="property popup" id="plotPopupplot4"&gt;...&lt;/div&gt;


And below is the current script text:

&lt;script&gt;
// When the user clicks on plot number, open the popup
function openPopup() {
{% set plottitle = craft.entries.section('availablehomes').relatedTo(category).level(2) %}
{% for entry in plottitle %}
    var popup = document.getElementById('plotPopup{{ entry.title|json_encode()|camel }}');
{% endfor %}
    popup.classList.toggle('show');
}
&lt;/script&gt;


Which is printing out as:

&lt;script&gt;
// When the user clicks on &lt;div&gt;, open the popup
function openPopup() {
    var popup = document.getElementById('plotPopupplot1');
    var popup = document.getElementById('plotPopupplot2');
    var popup = document.getElementById('plotPopupplot3');
    var popup = document.getElementById('plotPopupplot4');
    popup.classList.toggle('show');
}
&lt;/script&gt;
This is just a JavaScript problem. You have to add an event listener to the marker which opens the corresponding popup.

I put together a little example on JSBin here: https://jsbin.com/tigefikalu/edit?html,js,console,output

Hope that helps with the logic.