How to use 2 of the same HTML code on page 1?

Hi, who is a professional, prompt. I have a code (random random phrases), I need to code these 2 were posted on the same page, but with different values. I put the codes, but the value only shows the first code. How am I to separate them?
1 code.
<p><script src="http://code.jquery.com/jquery-3.3.1.slim.js"
integrity="sha256-fNXJFIlca05BIO2Y5zh1xrShK3ME+/lYZ0j+ChxX2DA="
 by adding crossorigin="anonymous"></script> <script>
 (function ($) {
 $(document).ready(function () {
 let variants = [
"Apple",
Banana
];
$('button').on({
 click() {
$(this)
.next('p')
 .text(variants[parseInt(Math.random() * variants.length)]);
}
})
});
})(jQuery);
</script></p>
<div style="text-align: center;"><button class="rnd-word yellow">Fruit</button>
<p>&nbsp;</p>
</div>

2 code
<p><script src="http://code.jquery.com/jquery-3.3.1.slim.js"
integrity="sha256-fNXJFIlca05BIO2Y5zh1xrShK3ME+/lYZ0j+ChxX2DA="
 by adding crossorigin="anonymous"></script> <script>
 (function ($) {
 $(document).ready(function () {
 let variants = [
"ios",
"Android"
];
$('button').on({
 click() {
$(this)
.next('p')
 .text(variants[parseInt(Math.random() * variants.length)]);
}
})
});
})(jQuery);
</script></p>
<div style="text-align: center;"><button class="rnd-word yellow">Phone</button>
<p>&nbsp;</p>
</div>

I have changed the title, so the first code was "anonymous" and the second "anonymous2". Help. I don't really understand. Thank you in advance!
March 19th 20 at 09:02
1 answer
March 19th 20 at 09:04
Solution
Set <button> a unique id and set the click event to it:

.....
$('#fruits-btn').on({
.....
<div style="text-align: center;"><button id="fruits-btn" class="rnd-word yellow">Fruit</button>

.....
$('#phone-btn').on({
.....
<div style="text-align: center;"><button id="phone-btn" class="rnd-word yellow">Phone</button>
Thank you very much! - clint commented on March 19th 20 at 09:07

Find more questions by tags HTMLJavaScript