Помогите, пожалуйста, подружить фрагменты javascript кода на одной html-странице

Первый фрагмент обеспечивает передачу данных из формы в аякс-запрос, работает методом "submit", должен быть готов к запуску после загрузки документа.

$(document).ready(function () {
    $("#myForm").submit(function () {
        // Получение ID формы
        var formID = $(this).attr('id');
        // Добавление решётки к имени ID
        var formNm = $('#' + formID);
        $.ajax({
            type: "POST",
            url: 'mail.php',
            data: formNm.serialize(),
            success: function (data) {
                // Вывод текста результата отправки
                $(formNm).html(data); 
            },
            error: function (jqXHR, text, error) {
                // Вывод текста ошибки отправки
                $(formNm).html(error);         
            }
        });
        return false;
    });
});
function openForm() {
    document.getElementById("myForm").style.display = "block";
}

function closeForm() {
    document.getElementById("myForm").style.display = "none";
}

Второй фрагмент обрабатывает нажатие на ссылку упомянутого документа.

let wordss = ['современно, удобно, разумно','экономно, здорово, прикольно', 'трубадурно, весело, сердито'];

let mybutton = document.querySelector('.mybutton');
let words = document.querySelector('.words');
let i=0;
mybutton.addEventListener('click', function () {

words.textContent=wordss[i];

if (i<2) {i=i+1;}
else {i=0;}
});

После соединения их в единый файл второй фрагмент перестает работать.