Solution 1 :

You can use class as selector as this can be same for multiple element. Use jQuery data to store index.

foreach ($form as $value) {
    $input = '<input type="number" class="percentage" data-index="'.$i.'" value="'.$value->persentase.'" min="0" max="100" title="Progres">';
    $inputdnone = '<input type="number" id="persentase'.$i.'" min="0" max="100" value="'.$value->persentase.'">'; //this input should not appear in view

In jQuery Part, no need to use loop just write change function for percentage class. This will be triggered whenever a value of an input is changed:

$(".reportsForApps").on("change", ".percentage", function(){ // 'parentElementId' should be replaced with actual parent element id.
    var tbpersentase = $(this).val(); 
    var index = $(this).data("index");

Solution 2 :

You have to execute that code on every #formJum value change using the change() function.

Also would be better if you dispose properly those event handlers in every input change.

Solution 3 :

Add a data-type attr data-group="tbpersentase" and call on it in your function

$input = null;
$inputdnone = null;

foreach ($form as $key => $value) { // you could also use $key value for increment
    $input .= '<input type="number" data-group="tbpersentase" id="tbpersentase'.$key.'" min="0" max="100" value="'.$value.'" title="Progres">';
    $inputdnone .= '<input type="hidden" id="persentase'.$key.'" min="0" max="100" value="'.$value.'">'; //this input should not appear in view
 // place in html to echo results of dynamically created inputs from DB info

// JQuery 3.4.1
$( "input[data-group='tbpersentase']" ).change(function() {
  var $this = $(this).val(); // get users value of the changing input field
  var tbpersentaseID = $(this).attr('id'); // get the changing input fields ID so we can remove IDs alpha chars
  var getID = tbpersentaseID.replace(/[^0-9]/g,''); // declare a new variable containing the numbers for the selected ID
  var persentaseID = 'persentase' + getID; // Concatenate desired alpha ID name to selected key value 

  $("#"+persentaseID).val($this); // set value


Tested in chrome and changes value of #persentase to the value entered in #tbpersentase yet retains original ID in #persentase. Hope this is what you were looking to achieve.

enter image description here

Also, if you want to know how many rows you get from DB, use count() in php.

$form_count = count($form);

Problem :

I am new to js and jquery and need some helps.
I have data that return from database by php like :

foreach ($form as $value) {
  $input = '<input type="number" id="tbpersentase'.$i.'" min="0" max="100" value="'.$value->persentase.'" title="Progres">';
  $inputdnone = '<input type="number" id="persentase'.$i.'" min="0" max="100" value="'.$value->persentase.'">'; //this input should not appear in view
 $row = '<input type="number" id="formJum" value="'.$i.'">';

the html result I want may like this:

<input id="tbpersentase0" value="myVal">
<input id="persentase0" value="myVal">
<input id="tbpersentase1" value="myVals">
<input id="persentase1" value="myVals">
// and so on as many as the data retrieve from db
<input id="formJum" value="rowCount">

In my project it needs to be when input with id='"tbpersentase"$i' value has been change by user, then the input with id='"persentase"$i' value change to whatever id='"tbpersentase"$i' value is.
I use some code like this :

var formJum = $('#formJum').val();
for(i=0; i<formJum; i++){
    var tbpersentase = $(this).val();

the browser is not giving any errors to me, so I think my code is done. But when I change the value of input with id='"tbpersentase"$i' the element id='"persentase"$i' value with the same i doesn’t change.

My whole element code look like this :

<div class="col-sm-7 px-0 reportsForApps d-none">
  <div class="px-3">
    <table class="table dttables" id="dtForm"> // data-tables client side processing
      <thead class="d-none">
          <th class="d-none">-</th>
          <th class="d-none">-</th>
      <tbody id="inputform">
        // #tbpersentase goes here for user input ..
    <div id=""> // this doesnt appear to user page
    <input type="number" id="formJum" value="">
    <div id="inputProgres"> // this doesnt appear to user page
      // #persentase goes here ..

All the value and element set by ajax.
Any idea what I have to do with my code? thank you


Comment posted by Asif Rahaman

why did you write change function in a loop? can you give an example using some value?

Comment posted by far1023

sorry I have update my question. the html result should be like that

Comment posted by Asif Rahaman

okk I got it but what should be the user input? will the user give input in

Comment posted by far1023

user will set the value to the input with id

Comment posted by Asif Rahaman

I got it why you used

Comment posted by far1023

thank you for the answer. But in my case it seem doesn’t work. Is it because I pass the input html by ajax?

Comment posted by Asif Rahaman

yes. you need to use

Comment posted by far1023

I got what you mean. But still not working to my code.

Comment posted by Sang Suantak

@far1023 can you show the parent element/html of the dynamic/ajax-rendered controls?

Comment posted by Sang Suantak

@AsifRahaman you need to change the event binding context from

Comment posted by far1023

Can you give more specific info please? I use

Comment posted by far1023

Thank you for your answer. But it is not working to my code.