Orbit slider fails to animate after adding DOM element dynamically

I basically have a slider on my page which runs fine as soon as it loads. The issue presents itself when I reload orbit-container after DOM loads and appending new data.

Basically, the method is using $(".orbit-container").empty() then use append() to add the li elements. After doing that, only the last element is displayed and it does not slide anymore.

I have tried the above method and also emptying the whole div and reload the whole orbit container.

Below's the sample code I pasted on JSFiddle.

$(document).ready(function(){
    $(document).foundation();
    });   

    function sampleScript(a) {
	
    $(".orbit-container").empty();
    $(".orbit-container").append('<li class="orbit-slide" style="text-align: center;"><img src="https://www.technobuffalo.com/sites/technobuffalo.com/files/styles/large/public/wp/2016/10/google-pixel-sample-photos-edited-054.jpg?itok=kSqq1XId" width="400" height="400"></li>');
    $(".orbit-container").append('<li class="orbit-slide" style="text-align: center;"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ5SEu48v57mH7lJBGMzQmnPyYHAqHTVKpJ4gLb1_qv8clUvY-6" width="400" height="400"></li>');
    $(".orbit-container").append('<li class="orbit-slide" style="text-align: center;"><img src="https://images.unsplash.com/photo-1503327431567-3ab5e6e79140?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80" width="400" height="400"></li>');


    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.3/css/foundation.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.1.1/motion-ui.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.3/js/foundation.js"></script>
    <div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit
    data-options="animation:slide;
                        pause_on_hover:true;
                  animation_speed:500;
                  navigation_arrows:true;
                  bullets:false;
                          timer_speed: 5000;
                          resume_on_mouseout: true;
                          data-swipe: true;
    ">
    <div class="orbit-wrapper">
    <div class="orbit-controls">
      <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>&#9664;&#xFE0E;</button>
      <button class="orbit-next {color: red;}"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</button>
    </div>
    <ul class="orbit-container" style="height:400px;">
        <li class="orbit-slide" style="text-align: center;" >
       
                    sample v
              
        </li>
        <li class="orbit-slide" style="text-align: center;" >
        
                sample w
               
        </li>
    
        <li class="orbit-slide" style="text-align: center;">
       
                    sample x
             
        </li>
        </ul>
          </div>
    </div><br><br>
    <button onClick="sampleScript('test 1')">
    Test button
    </button>

I basically expect that after the append function, the slider elements are created and it animates the same way it is animated when I load the page for the first time, but it just loads the last image and does not slide anymore.

Kinda stuck. Would love to get some tips on what I'm doing wrong here.

Solution

As a work around, solution for this

$(document).ready(function () {
  $('#orbit-container').foundation();
});
function sampleScript() {

  $("#orbit-container li").empty();
  $("#orbit-container li:nth-child(1)").append('<img src="https://www.technobuffalo.com/sites/technobuffalo.com/files/styles/large/public/wp/2016/10/google-pixel-sample-photos-edited-054.jpg?itok=kSqq1XId" width="400" height="400">');
  $("#orbit-container li:nth-child(2)").append('<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ5SEu48v57mH7lJBGMzQmnPyYHAqHTVKpJ4gLb1_qv8clUvY-6" width="400" height="400">');
  $("#orbit-container li:nth-child(3)").append('<img src="https://images.unsplash.com/photo-1503327431567-3ab5e6e79140?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80" width="400" height="400">');
  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.3/css/foundation.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.1.1/motion-ui.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.3/js/foundation.min.js"></script>
<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit data-options="animation:slide;
                        pause_on_hover:true;
                  animation_speed:500;
                  navigation_arrows:true;
                  bullets:false;
                          timer_speed: 5000;
                          resume_on_mouseout: true;
                          data-swipe: true;
    ">
  <div class="orbit-wrapper">
    <div class="orbit-controls">
      <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>&#9664;&#xFE0E;</button>
      <button class="orbit-next {color: red;}"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</button>
    </div>
    <button onClick="sampleScript()">
      Test button
    </button>
    <ul id="orbit-container" style="height:400px;" data-orbit>
      <li class="orbit-slide" style="text-align: center;">
        sample v
      </li>
      <li class="orbit-slide" style="text-align: center;">
        sample w
      </li>
      <li class="orbit-slide" style="text-align: center;">
        sample x
      </li>
    </ul>
  </div>
</div>