Change the id of the bootstrap carousel


i have carousel with width=300px and height=300px
I wanted to display modal and clone all carousel dom elements to view it larger
every thing is copied as i wanted.
but on clicking next prev buttons the older carousel moves not the one in modal I also changed id of new carousel and href inside new carousel but still new carousel is not scrolling on clicking 'next/prev or indicators'

$('#oldCarousel .item img').click(function(){
    var carousel = $(this).parents('#oldCarousel');
    $('#myModal .modal-dialog').html(carousel.clone());
    //$('#myModal .modal-content,#myModal .item,#myModal .modal-dialog').css({'width':'95%','height':'95%','max-height':'95%'});
    $('#myModal .modal-dialog').css('padding','0px');

this is jsfiddle link:

If you just want to make your carousel bigger, isn't it better to adjust width and height using for example some CSS class?


var elements = $("#oldCarousel").add("#oldCarousel .item img");

$('#oldCarousel .item img').click(function(){


   .fullscreen {
      width: 100vw;
      height: 100vh;

    img.fullscreen {
      min-width: 100vw;
      min-height: 100vh;
      width: auto;
      height: auto;

Please check the fiddle: