JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://wp-simplicity.com/wp-content/themes/simplicity-child-simplicity/style.css">
<label>
    <input type="checkbox" />チェックでjQuery実行</label>
<div id="the-content"></div>
<div class="ad-article-bottom ad-space">
    <div class="ad-label">スポンサードリンク</div>
    <div class="ad-left ad-pc adsense-336">
        <div class="widget pc_double_ads">
            <div class="ad-article-bottom ad-space">
                <div class="ad-label">スポンサードリンク</div>
                <div class="ad-left ad-pc adsense-336">左っかわ</div>
                <div class="ad-right ad-pc adsense-336">右っかわ</div>
                <div class="clear"></div>
            </div>
        </div>
    </div>
    <div class="clear"></div>
</div>

SCSS

.ad-article-bottom {
    display: block;
    .ad-label {
        color: #000;
    }
    width: 100%;
    height: 100%;
    border: 1px solid #ccc;
    .ad-right, .ad-left {
        background-color: rgba(0, 0, 0, .5);
        width: 150px;
        height: 150px;
        color: #fff;
    }
}

JavaScript

jQuery(function ($) {
    $(function () {
        
        //ここから ↓↓↓↓↓↓↓↓↓↓
        $("input").on("click", function () {
            if ($("input").prop("checked")) {
        //ここまで不要
                
            //上記inputとifは変化を見れるようにするため入れてるだけです
                //本来必要なものはここから
                $(".ad-article-bottom")
                    .find(".ad-article-bottom")
                    .insertAfter("#the-content");
                $(".ad-article-bottom:last").remove();
                //ここまで
                
        //ここから ↓↓↓↓↓↓↓↓↓
            } // if end
        }); // input end
        //ここまで不要
        
    });
});