Как заполнить input текстом из li?

$('li').click(function(e) {
  e.preventDefault();
  let text = $(this).attr('data-value')
  $('input').val(text)
})

$('li').click(function(e) {
  e.preventDefault();
  let text = $(this).find('a').text();
  $('input').val(text)
})

<input type="text" name="city" value="" id="input-city"  />
<ul>
  <li data-value="Город 1" class="js-item">
    <a href="#">Город 1</a>
  </li>
  <li data-value="Город 2" class="js-item">
    <a href="#">Город 2</a>
  </li>
  <li data-value="Город 3" class="js-item">
    <a href="#">Город 3</a>
  </li>
</ul>

const inp_city = document.querySelector('#input-city');
const li_item = document.querySelectorAll('.js-item');

for (let i = 0;i < li_item.length;i = i + 1) {
	li_item[i].addEventListener('click',function () {
  	inp_city.value = this.dataset.value;
  }, false)
}

$('li').click(function(){
let valueLi = $(this).data('value');
$('#input-city').val(valueLi);
});