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>
<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>