I want to update an input of one field to be data attribute of another field. I manage to do it once, but doesn't work the second time.
$('button').click(function() {
$('[data-key="hello"]').attr('data-key', $('[data-id="hi"]').val())
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input data-id="hi">
<input data-key="hello">
<button>Click</button>How do I make it update every time I click the button? Why doesn't it work every time?
You have use wrong approach. Because on every click data-key has been changed. You should use class or id.
$('button').click(function() {
$('#hello').attr('data-key', $('[data-id="hi"]').val())
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input data-id="hi">
<input id="hello" data-key="hello">
<button>Click</button>You can use data() attribute to achieve it.
$('button').click(function() {
$('#hello').data('key', $('#hi').val());
console.log($('#hello').data('key'));
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input data-id="hi" id="hi">
<input data-key="hello" id = "hello">
<button>Click</button>
