Copying hidden text onclick for promo codes

Question

I want to be able to show one piece of text Copy Code but have it copy the code #PromoCode01

This is what I have so far;

<p id="code" class="sub">Copy Code</p>

<div class="codecopytext">
<p id="code">#PromoCode01</p>
<style>.codecopytext { display: none;</style>
</div>
<script>
function myFunction() {
var copyText = document.getElementById("code");
copyText.select();
document.execCommand("copy");
alert("Copied the promo code:" + copyText.value);
}
</script>

I know this can be done with URLs and showing different text vs what the URL actually is. I'm just wondering why this won't work?

Thanks in advance.