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

<style>
        .yellow {
            color: Yellow
        }
    </style>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            let easyTimer = (function (words, timer, greetings, element) {
                let render = val => element.innerText = val ? val : timer === 0 ? words[parseInt(Math.random() * words.length)] : timer;
                render(`Готов к лету?`);
                setTimeout(() => {
                    setTimeout(() => element.classList.remove('yellow'), 1000);
                    let interval = setInterval(
                        () => timer - render() && 0 === timer && clearInterval(interval), 1000
                    )
                }, greetings * 1000)
            })(
                ['Да', 'Конечно да'],
                5,
                1, // сколько секунд показывать "Ответ готов"
                document.querySelector('.rnd-word.yellow')
            )
        })
    </script>
    <div>
        <div class="rnd-word yellow"></div>
    </div>
    <style>
        .red {
            color: Blue
        }
    </style>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            let easyTimer = (function (words, timer, greetings, element) {
                let render = val => element.innerText = val ? val : timer === 0 ? words[parseInt(Math.random() * words.length)] : timer;
                render(`Хотел бы на море?`);
                setTimeout(() => {
                    setTimeout(() => element.classList.remove('red'), 1000);
                    let interval = setInterval(
                        () => timer - render() && 0 === timer && clearInterval(interval), 1000
                    )
                }, greetings * 1000)
            })(
                ['Да', 'Нет'],
                5,
                1, // сколько секунд показывать "Ответ готов"
                document.querySelector('.rnd-word.red')
            )
        })
    </script>
    <div>
        <div class="rnd-word red"></div>
    </div>

<script
            src="http://code.jquery.com/jquery-3.3.1.slim.js"
            integrity="sha256-fNXJFIlca05BIO2Y5zh1xrShK3ME+/lYZ0j+ChxX2DA="
            crossorigin="anonymous"></script>
    <style>
        .yellow {
            color: darkgreen;
        }

        .red {
            color: Blue
        }
    </style>
    <script>(function ($) {
            $(document).ready(function () {
                let variants = [
                        "Да",
                        "Нет",
                        "Конечно да",
                        "Конечно нет",
                        "Не знаю"
                    ];

                $('button').on({
                    click() {
                        $(this)
                            .next('p')
                            .text(variants[parseInt(Math.random() * variants.length)]);
                    }
                })
            });
        })(jQuery);

    </script>
    <div>
        <button class="rnd-word yellow">Готов к лету?</button>
        <p></p>
    </div>
    <div>
        <button class="rnd-word red">Хотел бы на море?</button>
        <p></p>
    </div>