JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button type="submit" id="button" style="display: none; height: 30px; position: absolute; z-index: 2;">Применить</button>
<div id = 'checks-block' style = 'border: 1px solid black; z-index: 1;'>
<div style="display: block;">
<div tabindex="0" style="overflow: hidden; padding: 0px; width: 193px; border: 1px solid orange;">
<div style="width: 193px; height: 500px;">
<div style="padding: 0px; left: 0px; top: 0px; width: 180px;">
<ul class="check-list">
<li>
<input type="checkbox" id="1" checked="" value="13794">
<label for="1">BARS SILVER</label>
</li>
<li>
<input type="checkbox" id="2" value="13647">
<label for="2">BLAK HORSE</label>
</li>
<li>
<input type="checkbox" id="3" checked="" value="13659">
<label for="3">BOSCH</label>
</li>
<li>
<input type="checkbox" id="4" value="13721">
<label for="4">Brand</label>
</li>
<li>
<input type="checkbox" id="5" value="13835">
<label for="5">CHAMPION</label>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
JavaScript
(function ($)
{
$(document).ready(function () {
$('.check-list :checkbox').on('change', function(e) {
// определить последний выбранный элемент
var lastElement = undefined;
$(".check-list input[type='checkbox']:checked").each(function(index, element){
lastElement = element;
});
if (lastElement == undefined)
$('#button').hide(300);
else
{
var buttonX = $('#checks-block').offset().left + 200;
var buttonY = $(lastElement).next().offset().top + ($(lastElement).next().height() - 30 /*высота кнопки*/) / 2;
$('#button').hide(300, function(){
$('#button').css({left: buttonX, top: buttonY,}).show(300);
});
}
});
});
}(jQuery));