Inserting a field to multiple regions I have a content type with field_slides and I want to use it on multiple region in the same page. its a slide show using light gallery, at mobile view I want to hide the first div and show it on the second one.

&lt;body&gt;
&lt;div class="first-div"&gt; {{content.slides}} &lt;/div&gt;
&lt;div class="second-div"&gt;{{content.slides}} &lt;/div&gt;
&lt;/body&gt;


The issue is the slides works fine on the first div but if i try to open it on the second div it keeps scrolling  to the top ( first div )/reloading the page sometimes. However if I removed the region from the first div it works fine on the second div, I want to have it working on both the divs. Is this possible ?? please help

I also tried this 

&lt;script type="text/javascript"&gt;

jQuery(document).ready(function() {
  if (($(window).width() &lt; 701 )) {
    $(".first-div").empty();
    $(".second-div").append( "{{content.slides}}" );
   }
  else {
    $(".first-div").append( "{{content.slides}}" );
    $(".second-div").empty();
  }
});
&lt;/script&gt;


Its not working either ---

Here is the actual twig template 

{% set slider2 = content.content_2_project %}
   &lt;body&gt;
      &lt;div id="fullpage"&gt;
        &lt;div class="section"&gt;
          &lt;div class="portfolio-section1"&gt;
            &lt;div class="port-top"&gt;
              {{content.content_1_project}}
              {{content.content_1_punch}}
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;

        &lt;div class="section"&gt;
          &lt;div class="portfolio-section2"&gt;
              &lt;div class="port-left"&gt;
                &lt;div class="port-left-inner"&gt;
                  {{content.content_2_body}}
                  {{content.content_2_body_details}}
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="port-right"&gt;
                &lt;div class="port-right-slide-container"&gt;
                    {{content.content_2_project}}
                &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="section mobile-section"&gt;
          &lt;div class="port-mob-slide-container"&gt;
                {{ slider2 }}
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;


i'm using Fullpage.js on the drupal 8 site.
Try this tricky method

{% set slider2 =content.slides %}
&lt;body&gt;
&lt;div class="first-div"&gt; {{content.slides}} &lt;/div&gt;
&lt;div class="second-div"&gt;{{slider2}} &lt;/div&gt;
&lt;/body&gt;