Изменить значение ввода с помощью jQuery

Question

У меня есть несколько input, которые имеют разные data-id.

Если щелкнуть вход, я хочу изменить значение этого входа. Я попробовал это, но это не сработало, я искал, но не смог найти решение.

<script>
$('[data-id]').click(function() {
  $(this).attr('data-id').parent().value("changed value successfully!");
  //I tried this one below as well
  //$(this).attr('data-id').parent().input.value("changed value successfully!");
});
</script>

<div>
   <input type="submit" data-id="1" value="hello world">
</div>
<div>
   <input type="submit" data-id="2" value="hello world">
</div>
<div>
   <input type="submit" data-id="3" value="hello world">
</div>

Кто-нибудь знает, как я могу это исправить?

Спасибо

Answer 1

https://jsfiddle.net/j4bu6923/3/

$('input[data-id]').click(function() {
   $(this).val("changed value successfully!");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
   <input type="text" data-id="1" value="hello world">
</div>
<div>
   <input type="text" data-id="2" value="hello world">
</div>
<div>
   <input type="text" data-id="3" value="hello world">
</div>