title: How to rerun a carousel (materialize-css) that has been echoed from database.
body: <p>I'm trying to save &amp; retrieve an html div with a carousel inside of it, but when I try to store the insides of it (using JavaScript .html() function), to the database this is what get stored...</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="panel1"&gt;
    &lt;div id="div1" style="width: 100%; height: 100%;"&gt;
      &lt;div id="div1_resize" class="div1 carousel carousel-slider initialized" data-namespace="DIVdiv1_resizediv1carouselcarousel-slider0" style="height: 100px; display: none;"&gt;
        &lt;a class="carousel-item active" style="z-index: 0; opacity: 1; display: block; transform: translateX(0px) translateX(0px) translateX(0px) translateZ(0px);"&gt;
          &lt;div style="background: url(http://172.20.1.23/dmb/public/img/picture1.jpg); background-size: 100% 100%;" class="slider-size2"&gt;
          &lt;/div&gt;
        &lt;/a&gt;
        &lt;a class="carousel-item" style="transform: translateX(0px) translateX(-100px) translateZ(0px); z-index: -1; opacity: 1; display: block;"&gt;
          &lt;div style="background: url(http://172.20.1.23/dmb/public/img/picture2.jpg); background-size: 100% 100%;" class="slider-size2"&gt;
          &lt;/div&gt;
        &lt;/a&gt;
      &lt;/div&gt;
      &lt;div id="div1_resize" class="div1 carousel carousel-slider initialized" data-namespace="DIVdiv1_resizediv1carouselcarousel-sliderinitialized1" style="height: 100px; display: none;"&gt;
        &lt;a class="carousel-item" style="z-index: -1; opacity: 1; display: block; transform: translateX(0px) translateX(-100px) translateZ(0px);"&gt;
          &lt;div style="background: url(http://172.20.1.23/dmb/public/img/picture1.jpg); background-size: 100% 100%;" class="slider-size2"&gt;
          &lt;/div&gt;
        &lt;/a&gt;
        &lt;a class="carousel-item active" style="transform: translateX(0px) translateX(0px) translateX(0px) translateZ(0px); z-index: 0; opacity: 1; display: block;"&gt;
          &lt;div style="background: url(http://172.20.1.23/dmb/public/img/picture2.jpg); background-size: 100% 100%;" class="slider-size2"&gt;
          &lt;/div&gt;
        &lt;/a&gt;
      &lt;/div&gt;
      &lt;div id="div1_resize" class="div1 carousel carousel-slider initialized" data-namespace="DIVdiv1_resizediv1carouselcarousel-sliderinitialized2" style="height: 400px;"&gt;
        &lt;a class="carousel-item active" style="z-index: 0; opacity: 1; display: block; transform: translateX(0px) translateX(0px) translateX(0px) translateZ(0px);"&gt;
          &lt;div style="background: url(http://172.20.1.23/dmb/public/img/picture1.jpg); background-size: 100% 100%;" class="slider-size2"&gt;
          &lt;/div&gt;
        &lt;/a&gt;
        &lt;a class="carousel-item" style="transform: translateX(0px) translateX(-103.344px) translateZ(0px); z-index: -1; opacity: 1; display: block;"&gt;
          &lt;div style="background: url(http://172.20.1.23/dmb/public/img/picture2.jpg); background-size: 100% 100%;" class="slider-size2"&gt;
          &lt;/div&gt;
        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>When I try to echo it, it only displays the first image and not as carousel even though it is echoed as a carousel class</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;?php
  echo htmlspecialchars_decode($temp_row-&gt;html);
  ?&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Is there a way to rerun the carousel after it has been echoed?</p>