Bootstrap 5 Bundle and Jquery Spinner issue

I'm facing a problem using Bootstrap 5.3.3 (BS5) bundle with JQuery spinner (for inputs with quantity spinner) - it all works fine however the up and down arrows don't display on the spinner - the space that would have the arrows are clickable, but just display correctly) If I use the non bundle BS5 version it does, however, other BS5 functionality then doesn't work (such as the built in BS5 carousels).

Is there a trick to using these two successfully or working around the problem?

I'm assuming there is some kind of conflict going on, I don't want to lose BS5 built-in functionality, but also need the quantity spinner to work.

I've tried noconflict(), but this appears to require me to modify all my JS calls that use $ for JQuery - and I'm not sure that is even the issue: I notice on the output, these arrow spans are not even being created by JQuery.

Here's my example code with BS5 bundle included:

$(function() {
  var spinner = $("#spinner").spinner();
});

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.14.0/jquery-ui.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.14.0/themes/base/jquery-ui.min.css" integrity="sha512-F8mgNaoH6SSws+tuDTveIu+hx6JkVcuLqTQ/S/KJaHJjGc8eUxIrBawMnasq2FDlfo7FYsD8buQXVwD+0upbcA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<link href="//cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="//cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>


<input id="spinner" name="value">

Solution

So I believe I found an answer that works for my situation.

The issue is that for whatever reason the correct classes and arrow spans are not added to the a tags when I build my spinners, so I have to add them in myself as well as the style classes.

My solution: Add BS5 and Jquery/Jquery-UI as normal, then I have a script that builds my spinners for 0 to many spinners on a page. Within this buildspinners method, after the spinners are applied to the inputs add the following:

$(".input-group.spinner").each(function () {
        $upButton = $(this).find(".ui-spinner-up");
        $downButton = $(this).find(".ui-spinner-down");
        $upButton.append('<span class=\"ui-button-icon ui-icon ui-icon-triangle-1-n\"></span><span class=\"ui-button-icon-space\"> </span>');
        $downButton.append('<span class=\"ui-button-icon ui-icon ui-icon-triangle-1-s\"></span><span class=\"ui-button-icon-space\"> </span>');
        $upButton.addClass("ui-button").addClass("ui-widget").addClass("ui-button-icon-only");
        $downButton.addClass("ui-button").addClass("ui-widget").addClass("ui-button-icon-only");
    });

This seems to address the issue and my inputs look as I was expecting.