Change value of input with jQuery

Question

I have multiple input 's which have different data-id 's.

If the input is clicked, I want to change the value of that input. I tried this but it didn't work, I've searched but couldn't find a solution.

<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>

Does anyone know how I can fix this?

Thanks

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>