Cleaning up templates

[warfarincoumadin]

I noticed that my CHA templates have become very messy over time. I think this is because the addon adds new lines to the template instead of replacing them with each update. This results in many duplicate lines over time. Below are my custom templates. Perhaps you could have a look and see whether the CHA templates can also be cleaned up.

Front:

{{cloze:Text}}

<style>
cloze2_w:before {content: "[...]"; font-weight: bold; color: gray;}
cloze2 {display: none;}
/*
.cloze cloze2_w {display: none;}
.cloze cloze2 {display: inline;}
*/
</style>

<script>
var onShownHook

(function () {
  function scrollToCloze () {
    const element = document.getElementsByClassName('cloze')[0]
    const elementRect = element.getBoundingClientRect()
    const absoluteElementTop = elementRect.top + window.pageYOffset
    const middle = absoluteElementTop - (window.innerHeight / 2)
    window.scrollTo(0, middle)
  }
  if (typeof onShownHook !== 'undefined') {
    // for Anki 2.1.x
    onShownHook.push(scrollToCloze)
  } else {
    // for AnkiDroid
    setTimeout(scrollToCloze, 10)
  }
})()
</script>  

Back:

{{cloze:Text}}
<br>
<button class='cloze2-toggle' onclick='toggle()'>Reveal All</button>
<br>
{{#Extra}}{{hint:Extra}}{{/Extra}}

<style>
cloze2_w:before {content: "[...]"; font-weight: bold; color: gray;} /*Styles inactive [...]*/
cloze2 {display: none;} /*Hides contents of inactive clozes following [...]*/
.cloze cloze2_w {display: none;} /*Hides [...] in active cloze*/
cloze2.reveal-cloze2 {display: inline; color: #0074D9;} /*Reveals clozes on button press*/
cloze2_w.reveal-cloze2 {display: none;}

/*
.cloze cloze2 {display: inline;}
*/

.cloze2-toggle {display: block; appearance: button; margin-left:auto; margin-right:auto;}
.hint {display: flex; justify-content: center;}
</style>

<script>
function toggle() {
var elements = document.querySelectorAll('cloze2, cloze2_w');
    for(var i = 0 ; i < elements.length ; i++) {
        elements[i].classList.toggle('reveal-cloze2');
    }
}
</script>

<script>
setTimeout(function () {
  var clozeBoxes = document.querySelector('.cloze cloze2_w')
  var elements = document.querySelectorAll('cloze2.' + clozeBoxes.className)
  for (var i = 0; i < elements.length; i++) {
    elements[i].classList.add("cloze");
    elements[i].style.display = 'inline'
  }
}, 0)
</script>

Some notes: On the front template, .cloze cloze2_w {display: none;} and .cloze cloze2 {display: inline;} can be removed without changing the appearance. What is their function and why are they required? Same with .cloze cloze2 {display: inline;} on the back template - commenting this out does not change the appearance. On the back template, the line elements[i].classList.add("cloze"); was missing in the last script. Without that, the clozes are not always highlighted correctly when they are revealed. The hint styling of the extra field is just my preference and not part of CHA.

[phu54321]

Post your current uncleaned full tempalte with comments

[phu54321]

Bug reproduced