Jquery how to set values ​​from input field to element data attribute

Question

here is what i have:

<ul class="sortable">
<li data-order=""><input class="cant-see-me" value="3" /></li>
<li data-order=""><input class="cant-see-me" value="1" /></li>
<li data-order=""><input class="cant-see-me" value="2" /></li>
</ul>

I need this:

<ul class="sortable">
<li data-order="3"><input class="cant-see-me" value="3" /></li>
<li data-order="1"><input class="cant-see-me" value="1" /></li>
<li data-order="2"><input class="cant-see-me" value="2" /></li>
</ul>

I need to fill in the data order values ​​with those specified in the input field. I tried with each function, but all I have was the value from the first input field "3", which you need to insert into the data order.

this is what i tried + a lot of its options

$.each($('.sortable li'), function (index, value) { 
/*  $('.sortable li').each(function() {  this one had the same result*/

  var bla = $('.cant-see-me').val();
  $(this).attr('data-order', (bla));

});

thanks

Answer 1

The way you are trying to do this is to get each element with the cant-see-me class. This will return an array of 3 input elements in accordance with the HTML. You should get the value of the cant-see-me class that belongs to each element <li>:

var bla = $($(this).find('.cant-see-me')).val();
$(this).attr('data-order', bla);