Shopify 'page' block duplicating on all blocks.

[LukeCreativeInd]

Hi All!

I have an issue with a block I am editing for a client of mine in which they want to have a page popup within a section. The page is selection is working great, styling is looking great however the page selection is duplicating across all the blocks. 

For example, the section itself is called 'Slideshow With Text', this section has blocks which contain an image, some text, a button and now this page popup and it just scrolls through each block. When I add a page to the first block, it works exactly how intended. However, when I add a page to the second block, it ignores my chosen page and uses the page selected in the first block. 

Here is my code for reference:

Schema - last setting in block.

{
  "type": "page",
  "id": "page_popup",
  "label": "Page Popup"
},  
{
  "type": "text",
  "id": "page_popup_text",
  "label": "Page Popup Text",
  "default": "Page Pop Up Text"
}

Liquid - to display block within the other block elements.

{% if block.settings.page_popup != blank %}
<div>
<a href="javascript&colon;;" class="slideshow_page-popup medium-down--hidden" data-fancybox data-src="#pagepopup" data-type="inline">{{ block.settings.page_popup_text }} {% render 'icon', name: 'right-caret' %}</a>
<div class="page-popup" id="pagepopup">
<div class="page-popup-wrap content container {% if settings.table_styles_enabled %} table is-striped is-bordered {% endif %}">
<div class="one-whole column">
<h5 class="center">{{ pages[block.settings.page_popup].title }}</h5>
<div class="feature_divider"></div>
{{ pages[block.settings.page_popup].content }}
</div>
</div>
</div>
</div>  
{% endif %}

I'm presuming I am getting this issue as page selection is storing and is being used across all the blocks but I'm not sure how to separate the page selections. 

Any ideas would be appreciated.
Luke