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

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

Where

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

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

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

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

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):

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

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!

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

Javascript:

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

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);
});