What you could do in a pure handlebars solution is to use the following helpers:

<script id="regulations-template" type="text/x-handlebars-template">
{{#each myregs}}
    {{#ifPrevRegulation}} - {{regulations_label}} <br> {{/ifPrevRegulation}}
    {{#ifPrevGroup}}-- {{groups_label}} <br>{{/ifPrevGroup}}
    {{#ifPrevFilter}} ---- {{filters_label}} <br>{{/ifPrevFilter}}
    {{setPrevContext}}
{{/each}}
</script>

Where

var prevContext = null;
Handlebars.registerHelper('setPrevContext', function(){
    prevContext = this;
});

Handlebars.registerHelper('ifPrevRegulation', function(options){
    if(!(prevContext  && this.regulations_label == prevContext.regulations_label)){
      return options.fn(this);
    }
});

Handlebars.registerHelper('ifPrevGroup', function(options){
    if(!(prevContext  && this.regulations_label == prevContext.regulations_label && this.groups_label== prevContext.groups_label)){
      return options.fn(this);
    }
});

Handlebars.registerHelper('ifPrevFilter', function(options){
    if(!(prevContext  && this.regulations_label == prevContext.regulations_label && this.groups_label== prevContext.groups_label && this.filters_label == prevContext.filters_label)){
      return options.fn(this);
    }
});

personally may not agree with the decision of resuming a paused media automatically after n seconds. But for pure technical understanding I will share how I would do that.

Building on top of what you already have, you can have multiple commands on onClick separated by a semi-colon. Adding setTimeout() function call to play after 3000 ms (3 seconds):

<button class="pausa" onclick="document.getElementById('player').pause(); setTimeout(document.getElementById('player').play(), 3000)">||</button>

Of course it would be better if you move all your code to a function and just call that function onclick. This way you can have more code without making HTML/view unreadable and crowded. Like this:

Edit: I corrected a typo: “paseNplay()” instead of “pauseNplay()” . Now it works perfectly!

<button class="pausa" onclick="pauseNplay()">||</button>

Javascript:

function pauseNplay(){
   var player = document.getElementById('player');
   player.pause(); 
   setTimeout(function(){ player.play() }, 3000);
}

mousedown: Fires when the user depresses the mouse button.
mouseup: Fires when the user releases the mouse button.
click: Fires when a mousedown and mouseup event occur on the same element.

you probably want to separate the click in mousedown and mouseup:
$(document).on("mousedown", "#img_to_deal_with", function(e){
let maxH = $('#img_to_deal_with').height();
let maxL = $('#img_to_deal_with').width();
let posX = e.pageX - this.offsetLeft;
let posY = e.pageY - this.offsetTop;
console.log("Height : " + maxH);
console.log("Width : " + maxL);
console.log("Down Height : "+ posY);
console.log("Down Width :" + posX);
}).on("mouseup", "#img_to_deal_with", function(e){
let maxH = $('#img_to_deal_with').height();
let maxL = $('#img_to_deal_with').width();
let posX = e.pageX - this.offsetLeft;
let posY = e.pageY - this.offsetTop;
console.log("Height : " + maxH);
console.log("Width : " + maxL);
console.log("Up Height : "+ posY);
console.log("Up Width :" + posX);
});