Get values from select option from same structured tables

Question

I am creating table/tables dynamically in my HTML page. There may be one or more tables. Number is a vary. There is only one row on the table and these have same table structure . In my table row there is a select option as well as a button. What I am doing here is change the select option value and update the database using button. For that I am selecting from select option and put that value to hidden input field. Later I am taking all input filed data and updated the DB. For example if i have two tables i need to have two IDs for select option. To do that i am looping IDs from for loop in document ready. But that didn't work. That mean I cannot access to that value. But if i hard coded two IDs under same document ready it worked.

tbody...

echo "<form id='form' name='form'>";
                          echo "<tbody class='tbl_tbody'>";
                            echo "<tr>";
                              echo "<td style='width: 115px;'><b>".trim($row_sub_res['statDate'])."</b></td>";
                              echo "<td style='width: 115px;'><b>".trim($row_sub_res['tarDate'])."</b></td>";

                              echo "<td>";

                              echo "<label class='w3-text-red'><b>".trim($row_sub_res['status_name'])."</b></label><br>";
                              echo "<input name='oldSubStat' type ='hidden' id='selected_stat' value=".trim($row_sub_res['status']).">";  //first input 0
                              echo "<input name='newSubStat' type ='hidden' id='selected_stat_new_id' class='selected_statx$countx'>";

                              echo "<select id='select_my_id$countx' class='select_my_class$countx' >";
                              echo "<option disabled selected>Change Status</option>";
                              echo "<option id='1' value='1'>Pending</option>";
                              echo "<option id='3' value='3'>Complete</option>";
                              echo "<option id='4' value='4'>On Hold</option>";
                              echo "</select>";

                              echo "</td>";

                              //echo "<td>".trim($row_sub_res['tarDate'])."</td>";
                              echo "<td><b><input type='text' id='targetDatepickerID$countx' class='datepickerClass' disabled='disabled' placeholder='yyyy-mm-dd' name='tdate' value=".trim($row_sub_res['tarDate'])."></b></td>";

                              echo "<td> <input type='submit' id='sub_row_update_id$countx' class='sub_row_update' value='Update'/> </td>";
                            echo "</tr>";
                          echo "</tbody>";
                        echo "</form>";

I am looping table. countx is incrementing.

If I have two tables then if I hard coded like this, everything works well...

  $(".select_my_class0").change(function() {
    var idx = $(this).children(":selected").attr("id");
    $(".selected_statx0").val("");
    $(".selected_statx0").val(idx);
    console.log("idx " + idx);
 });

  $(".select_my_class1").change(function() {
    var idx = $(this).children(":selected").attr("id");
    $(".selected_statx1").val("");
    $(".selected_statx1").val(idx);
    console.log("idx " + idx);
 }); 

But If I loop this. That don't work....

for (var j = 0; j < 2; j++) {
   console.log("idx " + j);
   $(".select_my_class"+j).change(function() {
   var idx = $(this).children(":selected").attr("id");
   $(".selected_statx"+j).val("test");
   $(".selected_statx"+j).val(idx);

   });
}

I tried using both ID and class, But in looping both not work.

My button click event...

  for (var i = 0; i < 3; i++) {

  $("#sub_row_update_id"+i).click(function(e) {

    var $subitem;
    e.preventDefault();
   $subitem = $(this).closest("tr")   // Finds the closest row <tr> 
                     .find("input").each(function() {

    });

      var xxx2  = $subitem[0]["value"];  //old status
      var yyy2  = $subitem[1]["value"];  //new status
      var zzz2  = $subitem[2]["value"];  //new tar date

      console.log(xxx2); 
      console.log(yyy2);
      console.log(zzz2);

  });

  }

Answer 1

You dont have to loop it, You can use starts with selector.

$("select[class^='select_my_class']").change(function() {
  var n = $(this).attr("id").match(/\d/g)[0];
  var idx = $(this).find("option:selected").attr("id");
  $(".selected_statx"+n).val("test");
  $(".selected_statx"+n).val(idx);
});

Answer 2

Both you solutions of attaching event listeners seem to work. Here is a working demonstration on JSfiffle of it with ID:s. So you should be looking for other sources of error, probably outside what you posted. Are you targeting elements correctly?

https://jsfiddle.net/wj8aygsy/

$("#select_my_id0").change(function() {
    var idx = $(this).children(":selected").attr("id");
    $(".selected_statx0").val("");
    $(".selected_statx0").val(idx);
    console.log("separate " + idx);
 });

  $("#select_my_id1").change(function() {
    var idx = $(this).children(":selected").attr("id");
    $(".selected_statx1").val("");
    $(".selected_statx1").val(idx);
    console.log("separate " + idx);
 }); 


 for (var j = 0; j < 2; j++) {
   console.log("idx " + j);
   $("#select_my_id"+j).change(function() {
    var idx = $(this).children(":selected").attr("id");
    $(".selected_statx"+j).val("test");
    $(".selected_statx"+j).val(idx);
    console.log("loop " + idx);
   });
}