Вывести данные из таблицы Гугл на сайт

Выводим с помощью jquery таблицу google на сайте html. Так же выводим в каждую из строк кнопки «заказать» и количество заказываемого товара. При клике на Заказать данные товара передаются в форму

//гугл таблица
(function(){
  $(document).ready(function() {
    var spreadsheetId = '15ANDI4sefQRdTvDRlPvU40EvawopDl9-RRLIEXl--90';
    var apiKey = 'AIzaSyC4y5DdcaVqJ_NXKnMw4TyjnhSi3ONEeeU';
    var range = 'A:J';
    var endpoint = 'https://sheets.googleapis.com/v4/spreadsheets/' + spreadsheetId + '/values/' + range + '?key=' + apiKey;

    $.get(endpoint, function(response) {
      var values = response.values;

      // Создаем таблицу в блоке .table-google
      var table = '<div class="table-google">';
      for (var i = 0; i < values.length; i++) {
        var row = values[i];
        table += '<div class="table-item flex_block">';
        for (var j = 0; j < row.length; j++) {
          table += '<div class="item"><span>' + row[j] + '</span></div>';
            
        }
        table +=
            '<div class="btn-block">' +
            '<div class="quantity_inner">' +
            '<button class="bt_minus">-</button>' +
            '<input type="text" class="quantity" value="1">' +
            '<button class="bt_plus">+</button>' +
            '</div>' +
            '<a class="btn-mini btn-modal-product-table">Order</a>' +
            '</div>' +
            '</div>';
        table += '</div>';
      }
      table += '</div>';

      $('.table-google').html(table);
    });
    
    //форма в гугл таблице
    $(document).on('click', '.btn-modal-product-table', function() {
        //открыть форму
        $(".modal-smg_boby").fadeOut(300);
        $("#modal-smg-product-table").fadeIn(300);
        
        //передать значение наименования товара в форму
        var tableItem = $(this).closest('.table-item');
        var itemData = tableItem.find('.item span').map(function() {
            return $(this).text();
        }).get().join(',');

        $('#form-modal-product-table input[name="itemData"]').val(itemData);
        
        //передать значение кол-ва товара в форму
        var quantityValue = $(this).siblings('.quantity_inner').find('.quantity').val();
        $('#form-modal-product-table input[name="itemColvo"]').val(quantityValue);
        
        return false;
    });
    //форма в гугл таблице
      
      // Убавляем кол-во по клику
    $(document).on('click', '.quantity_inner .bt_minus', function() {
        let $input = $(this).parent().find('.quantity');
        let count = parseInt($input.val()) - 1;
        count = count < 1 ? 1 : count;
        $input.val(count);
    });

    // Прибавляем кол-во по клику
    $(document).on('click', '.quantity_inner .bt_plus', function() {
        let $input = $(this).parent().find('.quantity');
        let count = parseInt($input.val()) + 1;
        count = count > parseInt($input.data('max-count')) ? parseInt($input.data('max-count')) : count;
        $input.val(parseInt(count));
    });

    // Убираем все лишнее и невозможное при изменении поля
    $(document).on('change keyup input click', '.quantity_inner .quantity', function() {
        if (this.value.match(/[^0-9]/g)) {
            this.value = this.value.replace(/[^0-9]/g, '');
        }
        if (this.value == '') {
            this.value = 1;
        }
    });
  });
})();
//гугл таблица

//форма и верстка
<section class="page-content page-tab-price">
    <div class="container">
        <div class="info-tab-price">
            <div class="info-tab-price-cont clearfix">
                <div class="text">
                    <ul>
                        <li>All the goods that we do not have can be brought to order</li>
                        <li>Prices are indicated without delivery, the cost of delivery is negotiated with the manager</li>
                    </ul>
                    <a class="btn btn-modal" href="#">Contact the manager</a>
                </div>
                <div class="btn-block">
                    <a class="btn-sertificat" href="https://test3.danilsmg.ru/wp-content/uploads/2023/07/Certificate-COC_CRT_Alvi-BelSp.o.o_010923-1.pdf" target="_blank">
                        <div class="title-bold">Forest Stewardship Council International</div>
                        <span class="descr"><p>Certificate Code: SCS-COC-009593 <br>Trademark License Code: FSC-C18522</p></span>
                    </a>
                </div>
            </div>
        </div>
       
        <div class="table-google"></div>
    </div>
</section>


<div class="modal-smg_boby" id="modal-smg-product-table">
    <div class="modal-smg_boby-content">
        <div class="modal-smg">
            <div class="modal-smg_container">
                <div class="close--modal-smg"></div>
                <form id="form-modal-product-table" class="form-modal">
                    <div class="title-modal">Заказать звонок</div>
                    <div class="descr-modal">Оставьте контакты и мы Вам перезвоним</div>
                    <input type="text" name="name" placeholder="Имя">
                    <input type="text" name="phone" placeholder="Ваш телефон*" required>
                    <label class="polit-form">
                        <input name="polit" type="checkbox" checked="checked" required>
                        <span class="checkmark">Я ознакомился с <a href="/privacy-policy/" target="_blank">политикой конфиденциальности</a></span>
                    </label>
                    <button class="btn">Отправить заявку</button>
                    <input type="hidden" name="formData" value="Заказали обратный звонок с сайта <?php echo get_home_url(); ?>">
                    <input type="hidden" name="itemData" value="">
                    <input type="hidden" name="itemColvo" value="">
                </form>
            </div>
        </div>
        <div class="close-smg_boby"></div>
    </div>
</div>
//форма и верстка

Выводим такую же таблицу, но с корзиной

less

    .table-google{
        .table-item{
            padding-top: 15px;
            padding-bottom: 15px;
            border-bottom: @border;
            transition: 0.5s all;
            align-items: center;
            
            &:hover{
                background: @bg;
            }
            &:first-child{
                color: @text-gray;
                align-items: flex-start;
                
                &:hover{
                    background: transparent;
                }
                .btn-block{
                    display: none;
                }
            }
            .item{
                box-sizing: border-box;
                
                span{
                    display: inline-block;
                    position: relative;
                    top: -2px;
                }
                &:nth-child(1){
                    width: 50px;
                    color: @text-gray;
                }
                &:nth-child(2){
                    width: 8%;
                }
                &:nth-child(3){
                    width: 10%;
                }
                &:nth-child(4){
                    width: 8%;
                }
                &:nth-child(5){
                    width: 9%;
                }
                &:nth-child(6){
                    width: 12%;
                }
                &:nth-child(7){
                    width: 10%;
                }
                &:nth-child(8){
                    width: 8%;
                }
                &:nth-child(9){
                    width: 10%;
                    font-weight: 500;
                }
                &:nth-child(10){
//                    width: calc(~'15% - 50px');
                    width: calc(~'25% - 248px');
                    font-weight: 500;
                }
            }
            
            
            .quantity_inner{
                position: relative;
                display: inline-block;
                margin-right: 5px;

                button{
                    width: 36px;
                    height: 36px;
                    line-height: 35px;
                    background: @bg;
                    text-align: center;
                    outline: none;
                    border: none;
                    padding: 0;
                    position: absolute;
                    border-radius: 50%;
                    top: 1px;
                    transition: 0.3s all;

                    &:hover{
                        background: @text;
                        color: @w;
                    }
                }
                .bt_minus{
                    left: 1px;
                }
                .bt_plus{
                    right: 1px;
                }
                .quantity{
                    width: 120px;
                    font-size: 12px;
                    padding: 9px 38px;
                    padding-bottom: 12px;
                    border-radius: 20px;
                    transition: 0.5s all;
                    box-sizing: border-box;
                    text-align: center;
                    border: @border;
                    outline: none;
                    transition: 0.3s all;
                    box-sizing: border-box;

                    &:focus{
                        border-color: @color-1;
                    }
                }
            }
            .btn-mini{
                text-decoration: none;
                background: @text;
                color: @w;

                &:hover{
                    background: @color-1;
                }
            }
        }
    }
Контакты

Работаем: с ПН по ПТ, с 08:00 до 17:00 (МСК)
Отдыхаем: в СБ и ВС, чтобы быть в тонусе
и реализовывать самые сложные идеи