Как использовать одинаковых 2 HTML кода на 1 странице?

Question

[VitalyDmi]

Привет, кто профессионал, подскажите. У меня есть код (рандом случайных фраз), мне нужно чтобы 2 кода этих были размещены на одной странице, но с разными значениями. Я размещаю коды, но значение показывает только первого кода. Как мне их разделить?
1 код.

<p><script src="http://code.jquery.com/jquery-3.3.1.slim.js"
            integrity="sha256-fNXJFIlca05BIO2Y5zh1xrShK3ME+/lYZ0j+ChxX2DA="
            crossorigin="anonymous"></script> <script>
  (function ($) {
            $(document).ready(function () {
                let variants = [
                        "Яблоко",
                        "Банан"
                    ];
 $('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">Фрукт</button>
<p>&nbsp;</p>
</div>

2 код

<p><script src="http://code.jquery.com/jquery-3.3.1.slim.js"
            integrity="sha256-fNXJFIlca05BIO2Y5zh1xrShK3ME+/lYZ0j+ChxX2DA="
            crossorigin="anonymous"></script> <script>
  (function ($) {
            $(document).ready(function () {
                let variants = [
                        "ios",
                        "Андройд"
                    ];
 $('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">Телефон</button>
<p>&nbsp;</p>
</div>

Я изменял название, чтобы у первого кода было "anonymous", а у второго "anonymous2". Помогите. Я в этом действительно не разбираюсь. Спасибо заранее!

Answer 1

[DanKud]

Задаете для <button> уникальный id и устанавливаете событие клика на него:

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

.....
$('#phone-btn').on({
.....
<div style="text-align: center;"><button id="phone-btn" class="rnd-word yellow">Телефон</button>

Comments

[VitalyDmi]

Спасибо большое!