Select element on current page only, where multiple exist in DOM

Questions
1

In a situation where the same page could be loaded into the DOM multiple times, but with different html being loaded each time by ajax, how do I make it so the data is only changed on the current instance of the page, rather than all of them? i.e. only selecting the element on the current instance of the page.

$$(document).on('page:init', function (e) {
var page = e.detail;

if (page.name === 'sopload') {
        var sop = mainView.router.currentRoute.params.sop;
        var sopfile = 'sops/' + sop + '.html';
        $$('.sop-title').html(sop);
        app.request.get(sopfile, function (data) {
            $$('.sop-block').html(data);
        });
    }
});
2 
$$(document).on('page:init', function (e) {
    var page = e.detail;

    if (page.name === 'sopload') {
        var sop = mainView.router.currentRoute.params.sop;
        var sopfile = 'sops/' + sop + '.html';
        page.$el.find('.sop-title').html(sop);
        app.request.get(sopfile, function (data) {
            page.$el.find('.sop-block').html(data);
        });
    }
});
3

Thank you very much for the solution. Been trying .find, but didn’t get to that idea.

Does this work because page just refers to the currently active page in the DOM?

4

Yes, page object contains page data for which page:init has just happened, so we are looking for required elements in this page