Hint is not hidden

I have implemented hints on some kanji cards but the hint does not always display correctly

I got the code from this utube vid
How to add hints to Anki cards - YouTube

this hide and display works fine when the payload is normal text
but
when I have a field {{hint}} the text for that field is displayed on the screen
prior to the the click event (see the pic)

Front Template
{{#Hint}}
	<div id="hint" class="hidden ; class="hidden">
		<p class="trigger">[ click to show hint ]</p> 
                <p class="payload" > {{edit:Hint}}   </p>
 	</div>  
	<script>
		var hint = document.getElementById('hint');
		hint.addEventListener('click', function() {this.setAttribute('class', 'shown')    });
	</script>
{{/Hint}}

<!-
alternative payload of normal text
-<p class="payload" > normal text is hidden then displayed on click </p>
-->

Styling
 
#hint.hidden:hover {  color: #000; cursor: pointer; }
#hint.hidden .payload {display: none  ;  background-color: #000;  }
#hint.hidden .payload2 { display: none    }

#hint.shown {  background:fff ;   color: #000; }
#hint.shown .trigger { display: none;color: #fff; }
#hint.shown .payload { display: block; }

note: the edit: functionality works fine and it makes no difference if it’s include or not

Resolved, looked through Redddit again and then looked through Anki forum again and found the answer, should have see it before I created my post, but didn’t.

The answer is in this link Hint link is not labeled “Show hint” - Anki Desktop - Anki Forums (ankiweb.net)

I had spent hours trying to make this work. Should have spent a couple more minutes looking.

thanks to mmdj2