I am adding a block content by appending it to a div on a button click. The issue is that, it is adding the content below the button `Add Section`. It should add the content above the `Add Section` button, i.e where it is commented. My code is as follows: 

Can someone please help ? I want the content to be added above `div class="g"` each time I click the `Add Section` button.

```
<div class="a">
    <div class="b">
        <div class="c">
            <input type="text" id="user-title-1" class="d" value="user 1">
            <button class="mdl-button mdl-js-button edit-title-btn">
            </button>
        </div>

                <div class="e">
                    <ul>  
                            for (int j = 1; j <= numOfCheckboxes; j++)
                            {
                                <li>
                                    <input type="checkbox" id="user-@j-1">
                                    <label for="user-@j-1"><i class="icon-tick" disabled></i></label>
                                </li>
                            }
                        }
                    </ul>

                <div class="f">
                    <small class="_availability">
                        <span class="title"> Section 1 </span>
                    </small>

                    <button type="button" class="mdl-button btn-show js-show-supplier">
                        <span class="show">Show <i class="icon-show"></i></span>
                    </button>
                </div>
            </div>

        <!-- New section to be added here
            //
        -->

            <div class="g">
                <button type="button" class="mdl-button add-Section-btn js-add-Section">
                    AddSection
                </button> &nbsp; &nbsp;
                <button type="button" class="mdl-button secondary-btn js-save">
                    Save
                </button>
            </div>

    </div>
</div>  

<script>

    $(document.body).on('click', 'button.js-add-Section', function () {
                var content = `<div class="e">
                    <ul>  
                            for (int j = 1; j <= numOfCheckboxes; j++)
                            {
                                <li>
                                    <input type="checkbox" id="user-@j-1">
                                    <label for="user-@j-1"><i class="icon-tick" disabled></i></label>
                                </li>
                            }
                        }
                    </ul>
                    <div class="f">
                    <small class="_availability">
                        <span class="title"> Section 1 </span>
                    </small>

                    <button type="button" class="mdl-button btn-show js-show-supplier">
                        <span class="show">Show <i class="icon-show"></i></span>
                    </button>
                </div>
            </div>`

            $(this).closest('.b').append(content);
    });

</script>

```