I am looking to hide one Bootstrap carousel item and display it again when a button is clicked. I am using Jquery's .detach method which hides the slide, however when I try to append the hidden slide back, the slide does not appear in the same spot.

For example, I have CarouselItem1, CarouselItem2, CarouselItem3. I click on a button which hides CarouselItem2. When I click on another button I want CarouselItem2 to reappear in the same spot between CarouselItem1 and CarouselItem2

$("#customSwitch2").change(function(event){
    if (this.checked){
        var copy = $('#slide2');
        $('#slide2').detach(); <- this works
        
    } else {
        $('#slide1').append(copy);
    }
});