Cloning div contents with Jquery

//JS Code

$(document).ready(function() {

$('#trigger_adults').click(function() {
    var mainClone = $("#main-content").clone();

    $('#main-content').fadeOut('fast', function() {
        $('#main-content').replaceWith($('#adults'));
        $('#slider-sec').slideUp('slow');
        $('#adults').fadeIn('fast');
        $(window).scrollTop(0);
    });

    $('#return').click(function() {

        $("#adults").replaceWith(mainClone.clone());
        $('#adults').fadeOut('fast');
        $('#slider-sec').slideDown('slow');
        $(window).scrollTop($('#main-content').offset().top)
      });
  });
});

 <div class="container" id="main-content">
         <div class="row intro-row">
         <div class="col-md-12 text-center wow animated fadeInUp">
          <h2>Click an Icon below to get started</h2>

    </div>
    <div class="space-70"></div>
    <div class=" col-sm-4">
        <div class="services-box">
            <a href="#" id="trigger_adults"><i class="ion-ios-gear"></i></a>
            <h1>Adults Reports - </h1>
            <p>
                there's plenty of room to write a quick note about what kind of reports are available? or whatever else pertinant info?
            </p>
        </div>
    </div>
    <!--main tile box-->
    <div class=" col-sm-4">
        <div class="services-box">
            <i class="ion-arrow-graph-up-right"></i>
            <h1>Adults Dashboards</h1>
            <p>
                Redirects you to Power BI.com
            </p>
        </div>
    </div>
    <!--main tile box-->
    <div class="col-sm-4">
        <div class="services-box">
            <i class="ion-ios-gear"></i>
            <h1>Childrens Reports</h1>
            <p>
                there's plenty of room to write a quick note about what kind of reports are available? or whatever else pertinent info?
            </p>
        </div>
    </div>
    <!--main tile box-->
</div>
<!--row end-->
</div>
<!--intro with main tile end-->


<div class="container" id="adults" style="display:none;">
<div class="row">
    <div class="col-lg-11">
        <h3 class="heading-sec">Adults Reports</h3>

    </div>
    <div class="col-lg-1">
        <p class="slide-btn" style="float:right; margin-top: 0px">
            <a href="#" id="return" class="btn btn-dark btn-lg">Go Back</a>
        </p>
    </div>
</div>
<!--row-->
<div class="row">

    <div class=" col-sm-3">
        <div class="services-box">
            <i class="ion-ios-compose"></i>
            <h1>Assessments & Reviews</h1>
            <p>
                last refresh on| (from warehouse)
            </p>
        </div>
    </div>


    <div class=" col-sm-3">
        <div class="services-box">
            <i class="ion-ios-people"></i>
            <h1>Carers</h1>
            <p>
                last refresh on| (from warehouse)
            </p>
        </div>
    </div>

    <div class=" col-sm-3">
        <div class="services-box">
            <i class="ion-bug"></i>
            <h1>Data Quality</h1>
            <p>
                last refresh on| (from warehouse)
            </p>
        </div>
    </div>

    <div class=" col-sm-3">
        <div class="services-box">
            <i class="ion-sad"></i>
            <h1>DOLS</h1>
            <p>
                last refresh on| (from warehouse)
            </p>
        </div>
    </div>

    <div class=" col-sm-3">
        <div class="services-box">
            <i class="ion-cash"></i>
            <h1>Finance</h1>
            <p>
                last refresh on| (from warehouse)
            </p>
        </div>
    </div>

    <div class=" col-sm-3">
        <div class="services-box">
            <i class="ion-lock-combination"></i>
            <h1>MASH</h1>
            <p>
                last refresh on| (from warehouse)
            </p>
        </div>
    </div>
    <div class=" col-sm-3">
        <div class="services-box">
            <i class="ion-android-walk"></i>
            <h1>Reablement</h1>
            <p>
                last refresh on| (from warehouse)
            </p>
        </div>
    </div>
    <div class=" col-sm-3">
        <div class="services-box">
            <i class="ion-locked"></i>
            <h1>Safeguarding</h1>
            <p>
                last refresh on| (from warehouse)
            </p>
        </div>
    </div>
    <div class=" col-sm-3">
        <div class="services-box">
            <i class="ion-person"></i>
            <h1>Services</h1>
            <p>
                last refresh on| (from warehouse)
            </p>
        </div>
    </div>
    <div class=" col-sm-3">
        <div class="services-box">
            <i class="ion-model-s"></i>
            <h1>Transport</h1>
            <p>
                last refresh on| (from warehouse)
            </p>
        </div>
    </div>
    <!-- / Adults Directory Categories-->