не может отображать фотографии в слайдере начальной загрузки из JavaScript

Question

У меня есть api, и я создаю страницу для отображения всех фотографий с api с помощью ползунка bootstrap и выборки данных каждые 20 секунд. Я использую точный код с bootstrap веб-сайта, но при запуске мойкод появляется только первое изображение.

я не могу установить весь код здесь, потому что он большой.но я установил это на фотографиях.это часть моего кода:

<script type="text/javascript">
$(document).ready(function(){
    setInterval(function(){
     $( "#transactions" ).remove();
     const url = 'http://airport-system.tk/api/get_available_transaction';
     let jsondata;  
     fetch(url).then(
    function(u){ return u.json();}
  ).then(function(json){
    //start transaction div
    var para_transactions = document.createElement("div");
    para_transactions.setAttribute("id","transactions");
    var element = document.getElementById("body");
    element.appendChild(para_transactions);
    //end transaction div
    //start col-md-9 div
    var para_col_md = document.createElement("div");
    para_col_md.setAttribute("class","col-md-9");
    para_col_md.setAttribute("id","test_col");
    var element_transaction = document.getElementById("transactions");
    element_transaction.appendChild(para_col_md);
    document.getElementById("test_col").style.marginTop = '50px';
</script>

и это весь мой код:

первый снимок второй снимок