Скрыть элемент с помощью JQuery и активировать кнопку

Вы можете попробовать приведенный ниже код, он скроет кнопку, но при нажатии кнопки она будет выбрана. просто обновите jquery и попробуйте один раз. надеюсь это была работа

jQuery(document).ready(function(){
     jQuery("ul[data-attribute_name=attribute_pa_packages] li[data-value=pickup]").hide();
    jQuery("ul[data-attribute_name=attribute_pa_pickup-og-delivery] li").click(function(){
        var selectedDelivery = jQuery("ul[data-attribute_name=attribute_pa_pickup-og-delivery]").find("li.selected").attr("data-value");
        if (selectedDelivery == "pickup"){
            jQuery("ul[data-attribute_name=attribute_pa_packages] li[data-value=pickup] span").click();
            jQuery("ul[data-attribute_name=attribute_pa_packages] li[data-value=pickup]").hide(); // hide the "pickup" option in "Packages" if you like
        }
    });
});

Если я правильно понял вопрос, вам не нужна вторая кнопка вызова. Все, что вам нужно сделать, это поиграть с тем, когда показывать цену. Всякий раз, когда нажимается кнопка длины, самовывоза, доставки или упаковки, проверьте, соблюдены ли все необходимые условия, чтобы показать цену, а затем покажите цену. Проверка может быть такой: если выбрана доставка, то должны быть выбраны и посылки, иначе, если выбран самовывоз, посылки не требуются.

Если я правильно понял вопрос:

• вы хотите скрыть кнопку «Самовывоз» в разделе «Самовывоз или доставка» при загрузке страницы
• Показывать кнопку «Самовывоз» в «Посылках», когда пользователь нажимает «Самовывоз» в разделе «Самовывоз или доставка».

Вот способ JS сделать это:

• Запрещать Кнопка "Забрать" в "Посылках" на загрузка страницы.
• Кнопка Давать возможность Pickup в разделе "Посылки", когда пользователь нажимает кнопку Подбирать в разделе "Самовывоз или доставка".
• Кнопка Запрещать Pickup в разделе "Посылки", когда пользователь нажимает кнопку Доставка в разделе "Самовывоз или доставка"

Вот пример кода с более простым HTML (Live stackblitz: https://stackblitz.com/edit/js-l9ddiq):

<div>
  <span>Length</span>
  <button>4.2m</button>
  <button>5.1m</buton>
</div>

<div>
  <span>Pickup or delivery</span>
  <button id = "pickup-button">Pickup</button>
  <button id = "delivery-button">Delivery</buton>
</div>

<div id = "packages">
  <span>Packages</span>
  <button class = "toggle-button" style = "display: none;">Pickup</button>
  <button>30</button>
  <button>60</button>
  <button>90</button>
</div>

JS:

const pickUpButton = document.getElementById('pickup-button');
pickUpButton.addEventListener('click', event => {
  const packageButtons = document.querySelector('#packages').querySelectorAll('button');
  packageButtons.forEach(button => {
    if (button.classList.contains('toggle-button')) {
      button.style.display = 'block';
    } else {
      button.disabled = true;
    }
  });
});

const deliveryButton = document.getElementById('delivery-button');
deliveryButton.addEventListener('click', event => {
  const packageButtons = document.querySelector('#packages').querySelectorAll('button');
  packageButtons.forEach(button => {
    if (button.classList.contains('toggle-button')) {
      button.style.display = 'none';
    } else {
      button.disabled = false;
    }
  });
});