jQuery unable to load mobile size view cart

Question

I am trying to load the view cart area of my html and jQuery code in the mobile size, but unable to do so, I duplicate the function and added a 1 to the end of function and 1 to my ids in html page, but still unable to load the function and get it work in mobile size, here is my code.

I tried changing the function names so the don't get confused when loaded, however it does not work, is there a way to run one code so i do not duplicate the function

 =            minicart and settings active            =
    =============================================*/
    
    $('#minicart-trigger').on('click', function(e){
        e.preventDefault();
        $(this).siblings('.mini-cart').toggleClass('active');
        $('#settings-menu-wrapper').removeClass('active');
        $('body').addClass('active-overlay');
    });

    $('#header-settings-trigger').on('click', function(e){
        e.preventDefault();
        $(this).siblings('.settings-menu-wrapper').toggleClass('active');
        $('#mini-cart').removeClass('active');
        $('body').addClass('active-overlay');
    });

    $('#currency-trigger').on('click', function(e){
        e.preventDefault();
        $(this).siblings('#currency-menu').toggleClass('active');
        $('body').addClass('active-overlay');
    });

    $('#language-trigger').on('click', function(e){
        e.preventDefault();
        $(this).siblings('#language-menu').toggleClass('active');
        $('body').addClass('active-overlay');
    });

    /*Minicart Close When Click Outside Minicart*/

    $('body').on('click', function(e){
        var $target = e.target;
        if (!$($target).is('.header-cart-icon, .header-settings-icon, #currency-trigger, #language-trigger') && !$($target).parents().is('.header-cart-icon, .header-settings-icon, #currency-trigger') && $('body').hasClass('active-overlay')) {
           $('.mini-cart, .settings-menu-wrapper, #currency-menu, #language-menu').removeClass('active');
           $('body').removeClass('active-overlay');
        }
    });
     
    /*=====  End of minicart and settings active  ======*/
    
    $('#minicart-trigger1').on('click', function (c) {
        c.preventDefault();
        $(this).siblings('.mini-cart1').toggleClass('active');
        $('#settings-menu-wrapper1').removeClass('active');
        $('body').addClass('active-overlay');
    });
    
    $('#header-settings-trigger1').on('click', function (c) {
        c.preventDefault();
        $(this).siblings('.settings-menu-wrapper1').toggleClass('active');
        $('#mini-cart1').removeClass('active');
        $('body').addClass('active-overlay');
    });

    $('#currency-trigger1').on('click', function (c) {
        c.preventDefault();
        $(this).siblings('#currency-menu1').toggleClass('active');
        $('body').addClass('active-overlay');
    });

    $('#language-trigger1').on('click', function (c) {
        c.preventDefault();
        $(this).siblings('#language-menu1').toggleClass('active');
        $('body').addClass('active-overlay');
    });

    /*Minicart Close When Click Outside Minicart*/

    $('body').on('click', function (c) {
        var $target = c.target;
        if (!$($target).is('.header-cart-icon, .header-settings-icon, #currency-trigger1, #language-trigger1') && !$($target).parents().is('.header-cart-icon, .header-settings-icon, #currency-trigger1') && $('body').hasClass('active-overlay')) {
            $('.mini-cart1, .settings-menu-wrapper1, #currency-menu1, #language-menu1').removeClass('active');
            $('body').removeClass('active-overlay');
        }
    });

<div class="header-cart-icon">
  <a href="#" id="minicart-trigger">
    <i class="ion-bag"></i>
    <span class="counter" id="cart_items_count">0</span>
  </a>
  <div class="mini-cart" id="mini-cart">
    <div class="cart-items-wrapper ps-scroll" id="cart_items_wrapper">

    </div>
    <div class="cart-buttons">
      <a asp-page="/Cart">view card</a>
    </div>
  </div>
</div>