Один триггер события, один класс и один идентификатор jQuery

Question

От одного клика мне нужно добавить два разных значения в два разных поля: значение и значение * 50. Итак, я пытаюсь получить одно поле по классу, а другое по идентификатору. По какой-то причине это не работает. Вот логи c я использую. Может ли кто-нибудь просветить меня?

</script>

<script type="text/javascript">
$('button').on('click', function() {
  let value = this.value;
  $($(this).data('target')).val(value*50).trigger('input');
});

$('button').on('click', function() {
  let value = this.value;
  $($(this).attr('id')).val(value).trigger('input');
});


</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="bedroom" data-target=".i1" value="1">1</button>
 <input type="text" class="i1" id="i1" name="i1"><br>
 <input type="text" id="bedroom">

Answer 1

Вы не можете иметь несколько элементов с одинаковым идентификатором. Также вам не нужно писать 2 события клика для одной и той же кнопки.

$('button').on('click', function() {
  let value = this.value;
  $($(this).data('target')).val(value * 50).trigger('input');
  $("." + $(this).attr('id')).val(value).trigger('input');
});

Демо

$('button').on('click', function() {
  let value = this.value;
  $($(this).data('target')).val(value * 50).trigger('input');
  $("." + $(this).attr('id')).val(value).trigger('input');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="bedroom" data-target=".i1" value="1">1</button>
<input type="text" class="i1" id="i1" name="i1"><br>
<input type="text" class="bedroom">