Почему не работает код JS?

<div id="upr" style="display:none;position:relative;z-index:9999;">
<a data-left="-10"><i class="fa fa-arrow-left fa-4x" aria-hidden="true"></i></a>
<a data-left="7"><i class="fa fa-arrow-right fa-4x" aria-hidden="true"></i></a>
<a data-top="-5"><i class="fa fa-arrow-up fa-4x" aria-hidden="true"></i></a>
<a data-top="10"><i class="fa fa-arrow-down fa-4x" aria-hidden="true"></i></a>
</div>
<script>
$('a').click(function() {
  var
    $el = $('#overlay'),
    left = parseInt($el.css('left')),
    top = parseInt($el.css('top')),
    leftChange = $(this).data('left') | 0,
    topChange = $(this).data('top') | 0;
  $('#overlay').css({
    left: `${left + leftChange}px`,
    top: `${top + topChange}px`
  })
})
</script>

<script type="text/template" id="template">
....код сторонних разработчиков + хочу сюда добавить вышенаписанный код
</script>