title: Masonry and JQuery
body: <p>I am trying to reload my masonry each time I add item to my with an ajax query. However, it seems the recalculation of the masonry (I mean the display of each bloc) is never finished.</p>
  <p>Each video bloc is hovering each other after load once I reexecute manually</p>
  <pre><code>$grid = $('#masonry').masonry({
          itemSelector: &quot;.video-box&quot;,
          percentPosition: true,
        });
  </code></pre>
  <p>Does anyone see the reason why in my code ?</p>
  <p>Ajax function called (load() is called each time the bottom of the page is crossed and at the first page load)</p>
  <pre><code>    function load(recherche, start=0, limit=20, handlerEndPage) {
    console.log(start)
    console.log(limit)
    //$(document).bind(&quot;scroll&quot;, handlerEndPage);
  
    $(&quot;#loader_active&quot;).show()
    let form_data = new FormData();
    form_data.append('recherche', recherche);
    form_data.append('start', start);
    form_data.append('limit', limit);
  
  
    $.ajax({
  
      url: &quot;http://siteurl.com/ajax/videos.php&quot;,
      contentType: false,
      dataType: &quot;json&quot;,
      processData: false,
      cache: false,
      data: form_data,
      type: 'POST',
  
      success: function (data) {
        if (data.length != 0){
  
          $grid = $('#masonry').masonry({
            itemSelector: &quot;.video-box&quot;,
            percentPosition: true,
          });
  
          $(data).each(function(index, value) {
            if (value.id_video != null){
              $item = $(showVideo(value, false));
              $grid.append($item).masonry('appended', $item);
            }
          })
  
  
          console.log(&quot;bind&quot;)
          setTimeout(function(){
            $(document).unbind(&quot;scroll&quot;, handlerEndPage);
            $(document).bind(&quot;scroll&quot;, handlerEndPage);
          }, 300);
  
          // Scroll top items
          const scrollButtons = document.querySelectorAll(&quot;.scroll-btn&quot;),
              searchesWrapper = document.querySelector(&quot;.searches-wrapper&quot;);
  
          var amount = 0;
          scrollButtons.forEach((btn, i) =&gt; btn.addEventListener(&quot;click&quot;, () =&gt; {
            let direction = i &gt; 0 ? &quot;-&quot; : &quot;+&quot;;
  
            amount = eval(`${amount} ${direction} ${searchesWrapper.offsetWidth}`);
            searchesWrapper.style.setProperty(&quot;--scroll&quot;, amount + &quot;px&quot;);
  
            if (amount &gt;= 0) {
              scrollButtons[0].disabled = true;
            } else {
              scrollButtons[0].disabled = false;
            }
  
            if (Math.abs(amount - searchesWrapper.offsetWidth) &gt;= searchesWrapper.scrollWidth) {
              scrollButtons[1].disabled = true;
            } else {
              scrollButtons[1].disabled = false;
            }
          }));
  
          // Videos
  
  
          // Masonry Layout
          //$('#masonry').masonry('reloadItems')
  
          //$('#masonry').masonry({
          //  itemSelector: &quot;.video-box&quot;,
          //  percentPosition: true,
          //});
  
        }
        else {
          console.log(&quot;Aucune video restante.&quot;)
          console.log(&quot;unbind&quot;)
          $(document).unbind(&quot;scroll&quot;, handlerEndPage);
        }
  
        $(&quot;#loader_active&quot;).hide()
  
        // Evénement : Aucune vidéo retournée
  
        if ($(&quot;.bgVideo&quot;).length == 0){
          console.log(&quot;Aucun resultat trouvé&quot;)
          $(&quot;#aucun_resultat&quot;).show()
        }
        else {
          console.log(&quot;Des résultats ont été trouvés&quot;)
          $(&quot;#aucun_resultat&quot;).hide()
        }
  
        $grid = $('#masonry').masonry({
          itemSelector: &quot;.video-box&quot;,
          percentPosition: true,
        });
  
      }
    })
  }
  </code></pre>
  <p>Page before ajax call</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;fr&quot; xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xmlns:fb=&quot;http://ogp.me/ns/fb#&quot;&gt;
      &lt;head&gt;
          &lt;title&gt;Tok Tok&lt;/title&gt;
          &lt;meta charset=&quot;UTF-8&quot; /&gt;
          &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot; /&gt;
          &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0&quot; /&gt;
  
          &lt;link href=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk&quot; crossorigin=&quot;anonymous&quot; /&gt;
          &lt;link href=&quot;http://siteurl.com/css/style.css&quot; rel=&quot;stylesheet&quot; /&gt;
  
          &lt;link href=&quot;http://siteurl.com/css/style-toktok.css&quot; rel=&quot;stylesheet&quot; /&gt;
          &lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.gstatic.com&quot; /&gt;
          &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&amp;display=swap&quot; rel=&quot;stylesheet&quot; /&gt;
          &lt;link href=&quot;https://fonts.googleapis.com/icon?family=Material+Icons&quot; rel=&quot;stylesheet&quot; /&gt;
  
          &lt;link rel=&quot;shortcut icon&quot; href=&quot;http://siteurl.com/favicon.ico&quot; type=&quot;image/x-icon&quot; /&gt;
          &lt;link rel=&quot;apple-touch-icon&quot; href=&quot;http://siteurl.com/image/grey_grenouille.png&quot; /&gt;
          &lt;link rel=&quot;icon&quot; href=&quot;http://siteurl.com/favicon.ico&quot; type=&quot;image/x-icon&quot; /&gt;
          &lt;script src=&quot;https://code.jquery.com/jquery-3.5.1.min.js&quot; integrity=&quot;sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
          &lt;script src=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js&quot; integrity=&quot;sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
          &lt;script src=&quot;https://kit.fontawesome.com/566683bca0.js&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
          &lt;script src=&quot;https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js&quot;&gt;&lt;/script&gt;
      &lt;/head&gt;
  
      &lt;script src=&quot;http://siteurl.com/js/showVideo.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;http://siteurl.com/js/load.js&quot;&gt;&lt;/script&gt;
  
      &lt;body&gt;
          &lt;header&gt;
              &lt;div class=&quot;wrapper&quot;&gt;
                  &lt;form class=&quot;search-box&quot;&gt;
                      &lt;input type=&quot;search&quot; name=&quot;search&quot; id=&quot;search&quot; placeholder=&quot;Rechercher ...&quot; /&gt;
                      &lt;button id=&quot;search-btn&quot;&gt;
                          &lt;span id=&quot;clear&quot; onclick='$(&quot;#search&quot;).val(&quot;&quot;);' class=&quot;material-icons&quot;&gt;search&lt;/span&gt;
                      &lt;/button&gt;
                  &lt;/form&gt;
                  &lt;button type=&quot;button&quot; id=&quot;upload-btn&quot;&gt;
                      &lt;span class=&quot;material-icons&quot;&gt;video_call&lt;/span&gt;
                      &lt;span&gt;Upload&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;button type=&quot;button&quot; id=&quot;sign-in-btn&quot;&gt;
                      &lt;span class=&quot;material-icons&quot;&gt;account_circle&lt;/span&gt;
                      &lt;span&gt;Sign in&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;nav id=&quot;menu&quot; aria-hidden=&quot;true&quot;&gt;
                      &lt;div class=&quot;list&quot;&gt;
                          &lt;p class=&quot;list-title&quot;&gt;List 1&lt;/p&gt;
                          &lt;ul&gt;
                              &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Item 1&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Item 2&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Item 3&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Item 4&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                      &lt;div class=&quot;list&quot;&gt;
                          &lt;p class=&quot;list-title&quot;&gt;List 2&lt;/p&gt;
                          &lt;ul&gt;
                              &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Item 1&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Item 2&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Item 3&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Item 4&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                      &lt;div class=&quot;list&quot;&gt;
                          &lt;p class=&quot;list-title&quot;&gt;List 3&lt;/p&gt;
                          &lt;ul&gt;
                              &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Item 1&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Item 2&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Item 3&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Item 4&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                      &lt;div class=&quot;list&quot;&gt;
                          &lt;p class=&quot;list-title&quot;&gt;List 4&lt;/p&gt;
                          &lt;ul&gt;
                              &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Item 1&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Item 2&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Item 3&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Item 4&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/nav&gt;
                  &lt;button type=&quot;button&quot; id=&quot;menu-btn&quot;&gt;
                      &lt;span class=&quot;material-icons&quot;&gt;menu&lt;/span&gt;
                      &lt;span class=&quot;material-icons&quot;&gt;close&lt;/span&gt;
                  &lt;/button&gt;
              &lt;/div&gt;
          &lt;/header&gt;
  
          &lt;section id=&quot;searches&quot;&gt;
              &lt;div class=&quot;wrapper&quot;&gt;
                  &lt;div class=&quot;searches-top&quot;&gt;
                      &lt;h1 class=&quot;section-title&quot;&gt;Trending Searches&lt;/h1&gt;
                      &lt;div class=&quot;scroll-buttons&quot;&gt;
                          &lt;button type=&quot;button&quot; class=&quot;scroll-btn&quot; disabled&gt;
                              &lt;span class=&quot;material-icons&quot;&gt;chevron_left&lt;/span&gt;
                          &lt;/button&gt;
                          &lt;button type=&quot;button&quot; class=&quot;scroll-btn&quot;&gt;
                              &lt;span class=&quot;material-icons&quot;&gt;chevron_right&lt;/span&gt;
                          &lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;searches-container&quot;&gt;
                      &lt;div class=&quot;searches-wrapper&quot;&gt;
                          &lt;a href=&quot;#&quot; class=&quot;search-box&quot;&gt;
                              &lt;video src=&quot;http://siteurl.com/videos/511.mp4&quot; preload=&quot;metadata&quot;&gt;&lt;/video&gt;
                              &lt;p class=&quot;search-title&quot;&gt;Search tag&lt;/p&gt;
                          &lt;/a&gt;
                          &lt;a href=&quot;#&quot; class=&quot;search-box&quot;&gt;
                              &lt;video src=&quot;http://siteurl.com/videos/510.mp4&quot; preload=&quot;metadata&quot;&gt;&lt;/video&gt;
                              &lt;p class=&quot;search-title&quot;&gt;Search tag&lt;/p&gt;
                          &lt;/a&gt;
                          &lt;a href=&quot;#&quot; class=&quot;search-box&quot;&gt;
                              &lt;video src=&quot;http://siteurl.com/videos/505.mp4&quot; preload=&quot;metadata&quot;&gt;&lt;/video&gt;
                              &lt;p class=&quot;search-title&quot;&gt;Search tag&lt;/p&gt;
                          &lt;/a&gt;
                          &lt;a href=&quot;#&quot; class=&quot;search-box&quot;&gt;
                              &lt;video src=&quot;http://siteurl.com/videos/506.mp4&quot; preload=&quot;metadata&quot;&gt;&lt;/video&gt;
                              &lt;p class=&quot;search-title&quot;&gt;Search tag&lt;/p&gt;
                          &lt;/a&gt;
                          &lt;a href=&quot;#&quot; class=&quot;search-box&quot;&gt;
                              &lt;video src=&quot;http://siteurl.com/videos/507.mp4&quot; preload=&quot;metadata&quot;&gt;&lt;/video&gt;
                              &lt;p class=&quot;search-title&quot;&gt;Search tag&lt;/p&gt;
                          &lt;/a&gt;
                          &lt;a href=&quot;#&quot; class=&quot;search-box&quot;&gt;
                              &lt;video src=&quot;http://siteurl.com/videos/508.mp4&quot; preload=&quot;metadata&quot;&gt;&lt;/video&gt;
                              &lt;p class=&quot;search-title&quot;&gt;Search tag&lt;/p&gt;
                          &lt;/a&gt;
                          &lt;a href=&quot;#&quot; class=&quot;search-box&quot;&gt;
                              &lt;video src=&quot;http://siteurl.com/videos/492.mp4&quot; preload=&quot;metadata&quot;&gt;&lt;/video&gt;
                              &lt;p class=&quot;search-title&quot;&gt;Search tag&lt;/p&gt;
                          &lt;/a&gt;
                          &lt;a href=&quot;#&quot; class=&quot;search-box&quot;&gt;
                              &lt;video src=&quot;http://siteurl.com/videos/493.mp4&quot; preload=&quot;metadata&quot;&gt;&lt;/video&gt;
                              &lt;p class=&quot;search-title&quot;&gt;Search tag&lt;/p&gt;
                          &lt;/a&gt;
                          &lt;a href=&quot;#&quot; class=&quot;search-box&quot;&gt;
                              &lt;video src=&quot;http://siteurl.com/videos/494.mp4&quot; preload=&quot;metadata&quot;&gt;&lt;/video&gt;
                              &lt;p class=&quot;search-title&quot;&gt;Search tag&lt;/p&gt;
                          &lt;/a&gt;
                          &lt;a href=&quot;#&quot; class=&quot;search-box&quot;&gt;
                              &lt;video src=&quot;http://siteurl.com/videos/495.mp4&quot; preload=&quot;metadata&quot;&gt;&lt;/video&gt;
                              &lt;p class=&quot;search-title&quot;&gt;Search tag&lt;/p&gt;
                          &lt;/a&gt;
                          &lt;a href=&quot;#&quot; class=&quot;search-box&quot;&gt;
                              &lt;video src=&quot;http://siteurl.com/videos/496.mp4&quot; preload=&quot;metadata&quot;&gt;&lt;/video&gt;
                              &lt;p class=&quot;search-title&quot;&gt;Search tag&lt;/p&gt;
                          &lt;/a&gt;
                          &lt;a href=&quot;#&quot; class=&quot;search-box&quot;&gt;
                              &lt;video src=&quot;http://siteurl.com/videos/497.mp4&quot; preload=&quot;metadata&quot;&gt;&lt;/video&gt;
                              &lt;p class=&quot;search-title&quot;&gt;Search tag&lt;/p&gt;
                          &lt;/a&gt;
                          &lt;a href=&quot;#&quot; class=&quot;search-box&quot;&gt;
                              &lt;video src=&quot;http://siteurl.com/videos/498.mp4&quot; preload=&quot;metadata&quot;&gt;&lt;/video&gt;
                              &lt;p class=&quot;search-title&quot;&gt;Search tag&lt;/p&gt;
                          &lt;/a&gt;
                          &lt;a href=&quot;#&quot; class=&quot;search-box&quot;&gt;
                              &lt;video src=&quot;http://siteurl.com/videos/499.mp4&quot; preload=&quot;metadata&quot;&gt;&lt;/video&gt;
                              &lt;p class=&quot;search-title&quot;&gt;Search tag&lt;/p&gt;
                          &lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/section&gt;
          &lt;section id=&quot;trending&quot;&gt;
              &lt;div class=&quot;wrapper&quot;&gt;
                  &lt;h1 class=&quot;section-title&quot;&gt;Dernières vidéos&lt;/h1&gt;
                  &lt;div id=&quot;masonry&quot; class=&quot;trending-container&quot;&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/section&gt;
      &lt;/body&gt;
  
      &lt;script src=&quot;http://siteurl.com/js/script.js&quot;&gt;&lt;/script&gt;
      &lt;script&gt;
          let start = 0;
          let limit = 30;
  
          // Gestion infinite scroll
          var handlerEndPage = function () {
              var deviceAgent = navigator.userAgent.toLowerCase();
              var agentID = deviceAgent.match(/(iphone|ipod|ipad)/);
  
              if ($(window).scrollTop() + $(window).height() &gt; $(document).height() - 100 || (agentID &amp;&amp; $(window).scrollTop() + $(window).height() + 200 &gt; $(document).height())) {
                  load($(&quot;#search&quot;).val(), start, limit, handlerEndPage);
                  start += limit;
                  console.log(&quot;Fin de page détectée -&gt; Chargement enclenché&quot;);
              }
          };
  
          $(document).bind(&quot;scroll&quot;, handlerEndPage);
  
          load(&quot;&quot;, start, limit, handlerEndPage);
          start += limit;
  
          // Gestion de la barre de recherche
          let old_search = &quot;&quot;;
          let search = &quot;&quot;;
  
          $(&quot;#clear&quot;).on(&quot;click&quot;, function () {
              setTimeout(function () {
                  $(&quot;#videos&quot;).empty();
                  $(&quot;#loader_active&quot;).show();
                  search = $(&quot;#search&quot;).val();
  
                  console.log(&quot;rechargement&quot;);
                  start = 0;
                  limit = 30;
                  load(search, start, limit, handlerEndPage);
                  start += limit;
              }, 100);
          });
  
          $(&quot;#search&quot;).on(&quot;keyup paste&quot;, function () {
              setTimeout(function () {
                  $(&quot;#videos&quot;).empty();
                  $(&quot;#loader_active&quot;).show();
                  search = $(&quot;#search&quot;).val();
  
                  console.log(&quot;rechargement&quot;);
                  start = 0;
                  limit = 30;
                  load(search, start, limit, handlerEndPage);
                  start += limit;
              }, 100);
          });
  
          // Gestion des Play/Pause de chaque vidéo
          $(document).on(&quot;click&quot;, &quot;.video-box&quot;, function () {
              console.log(&quot;ok detected&quot;);
              if (this.children[0].paused) {
                  console.log(this.children[0]);
                  $(this).children(&quot;#video_tag&quot;).removeClass(&quot;pause&quot;);
                  $(this).children(&quot;#video_tag&quot;).addClass(&quot;play&quot;);
  
                  let playPromise = this.children[0].play();
                  if (playPromise !== undefined) {
                      playPromise
                          .then((_) =&gt; {
                              // Automatic playback started!
                              // Show playing UI.
                          })
                          .catch((error) =&gt; {
                              // Auto-play was prevented
                              // Show paused UI.
                          });
                  }
              } else {
                  this.children[0].pause();
                  $(this).children(&quot;#video_tag&quot;).removeClass(&quot;play&quot;);
                  $(this).children(&quot;#video_tag&quot;).addClass(&quot;pause&quot;);
              }
          });
      &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  <p>ShowVideo function:</p>
  <pre><code>function showVideo(videoData, autoplay=false) {
  
      // VIDEO BOX
  
      let videoBox = $(&quot;&lt;div/&gt;&quot;, {
          class: &quot;video-box&quot;,
          id: &quot;append&quot;
      });
  
      let video = $('&lt;video /&gt;', {
          src: &quot;http://siteurl.com/videos/&quot; + videoData.lien,
          preload: &quot;none&quot;,
          controls: false,
          autoplay: false,
          poster: &quot;http://siteurl.com/thumbnails/&quot;+videoData.id_video+&quot;.jpg&quot;,
          id : &quot;video_tag&quot;
      });
  
      let vidElements = $(&quot;&lt;div/&gt;&quot;, {
          class: &quot;vid-elements&quot;
      });
  
      // ICONS
  
      let stateIcon = $(&quot;&lt;div/&gt;&quot;, {
          class: &quot;state-icon&quot;
      });
  
      let playArrow = $(&quot;&lt;span/&gt;&quot;, {
          class: &quot;material-icons&quot;
      });
      playArrow = playArrow.html('play_arrow');
  
      let pause = $(&quot;&lt;span/&gt;&quot;, {
          class: &quot;material-icons&quot;
      });
      pause = pause.html('pause');
  
      stateIcon = stateIcon.append(playArrow)
      stateIcon = stateIcon.append(pause)
  
      vidElements = vidElements.append(stateIcon)
  
  
          //&lt;div className=&quot;bottom-elements&quot;&gt;
          //    &lt;p className=&quot;vid-title&quot;&gt;Meme title&lt;/p&gt;
           //   &lt;button type=&quot;button&quot; className=&quot;favorite&quot;&gt;
           //       &lt;span className=&quot;material-icons&quot;&gt;favorite&lt;/span&gt;
          //    &lt;/button&gt;
         // &lt;/div&gt;
  
  
      let bottomElements = $(&quot;&lt;div/&gt;&quot;, {
          class: &quot;bottom-elements&quot;
      });
  
      let buttonFavorite = $(&quot;&lt;button/&gt;&quot;, {
          class: &quot;favorite&quot;,
          type: &quot;button&quot;
      });
  
  
      let memeTitle = $(&quot;&lt;p/&gt;&quot;, {
          class: &quot;vid-title&quot;
      });
      memeTitle = memeTitle.html(videoData.titre)
  
      let favorite = $(&quot;&lt;span/&gt;&quot;, {
          class: &quot;material-icons&quot;
      });
      favorite = favorite.html(&quot;favorite&quot;)
  
      buttonFavorite = buttonFavorite.append(favorite)
      bottomElements = bottomElements.append(memeTitle)
      bottomElements = bottomElements.append(buttonFavorite)
  
      vidElements = vidElements.append(bottomElements)
  
      videoBox = videoBox.append(video)
      videoBox = videoBox.append(vidElements)
  
      return videoBox
  
  
  }
  </code></pre>
  <p>Example of result after ajax call (videos are crossing hover each other once I execute:</p>
  <p><a href="https://i.stack.imgur.com/0sLFz.png" rel="nofollow noreferrer">example of result</a></p>