Лев Яковлев

Реализация табов. Сначала определяем индекс (порядковый номер) кнопки среди всех кнопок.
Затем производим операции для всех кнопок (удалим класс) , а далее проведем операции с той кнопкой, на какую нажали ( метод eq(index) ). С отображаемым контентом тоже самое. Я сделал через show/hide, можно через удаление/ добавление класса.

$('#buttons-grid a').click(function () {  
   var index = $('#buttons-grid a').index($(this));
   $('#buttons-grid a').removeClass('active').eq(index).addClass('active');
   $('#contactAndMapBlock__wrapper .contactAndMapBlock__right').hide().eq(index).show();
});

function addClass(){
ваш метод. не забудьте проверку, что элемент точно найден
}
addEventListener('DOMContentLoaded', addClass);

https://learn.javascript.ru/onload-ondomcontentloaded - хорошее описание

В чем проблема создать отдельную папку и сложить туда верстку

И отправить клиенту ссылку типа
mysite.ru/layout/index.html

У некоторых CMS могут быть подводные камни, дефолтный рутинг такое пресекает, возможно, понадобится еще правило в .htaccess прописать, а может и не понадобится, не в курсе конкретно про OpenCart.

Если вы, конечно, клиенту доверяете, что он не сопрет верстку без оплаты.
Если не доверяете, то снимите видео или покажите ему верстку, расшарив вид своего рабочего стола (Skype, Zoom и т д).

Что значит "конкретной обёртки?
Обработчик какого-то элемента?
Открывайте инструменты разработчика, тыкайте селектором в элемент.
И на той панели где отображаются стили элемента есть вкладка "Event Listeners" ну или том языке, какой у Вас выбран. Там можно посмотреть все обработчики данного элемента.

Если что-то другое, то можно открыть вкладку Sources, сбоку в "проводнике" найти js файлы и искать код там.

Оберните h3 и input в div.
Div'у дайте свойство "display: flex"