区分具有相同id的多个行单元格

I have empty textarea (Note1, Note2, Note3, Note4) and input text (Order level, Qty Level) on my table. How to detect which cell of textarea or input text using onchange method? I have script trigger onchange but it only trigger the alert message on the first row of table td.

For example, if I add text on the 2nd row of Note1 textarea, it won't alert message. Since the table is loop, how to differentiate between cells? Because all note1 textarea using the same id but have multiple row?

Here my code:

<table id="table1" class="table table-bordered"> 
   <thead>
     <tr>
       <th style="display:none;">Stock Code</th>
       <th>Stock Name</th>
       <th>Note 1</th>
       <th>Note 2</th>
       <th>Note 3</th>
       <th>Note 4</th>
       <th>Order Level</th>
       <th>Qty Level</th>
       <th>Balance</th>  
       <th>Purchase Price</th>  
       <th>UOM</th>                    

       @for ($i=0; $i<=12; $i++)
         <th><?php echo date('Y/m', strtotime('-'.$i.' month', strtotime($getDate)));?></th>
       @endfor                                          
    </tr>
  </thead>
  <tbody>
    <!-- Foreach loop from db -->
    @foreach ($query as $val)     
      <tr>                    
        <td style="display:none;">{{ $val->StockCode }}</td>
        <td class="text-nowrap align-middle">{{ $val->StockName }}</td>
        <td><textarea rows="2" cols="10" id="note1" class="align-middle"></textarea></td>
        <td><textarea rows="2" cols="10" id="note2" class="align-middle"></textarea></td>
        <td><textarea rows="2" cols="10" id="note3" class="align-middle"></textarea></td>
        <td><textarea rows="2" cols="10" id="note4" class="align-middle"></textarea></td>
        <td><input type="text" id="orderlevel" class="text-right"></td>
        <td><input type="text" id="qtylevel" class="text-right"></td>
        <td class="text-right align-middle">{{ number_format($val->CurrentBalance, 2) }}</td>
        <td class="text-right align-middle">{{ number_format($val->PurchasePrice, 2) }}</td>
        <td class="text-center align-middle">{{ $val->BaseUOM }}</td>

        @for ($i=1; $i<=13; $i++)
          <?php 
            //looping variables
            $Qty = 'Qty'.$i;
            $Date = 'Date'.$i;
          ?>
           <td class="text-right align-middle">                                    
             @if($val->$Qty > 0) 
             <a id="viewdetails" data-toggle="modal" 
                data-productid="{{$val->Id}}"
                data-productname="{{$val->StockName}}"
                data-getdate="{{date('Y-m', strtotime($val->$Date))}}"
                                    href="#" data-target="#dataModal">{{ number_format($val->$Qty, 2) }}</a>
             @endif
           </td>                                                 
         @endfor 
       </tr> 
       @endforeach  
       <!-- End Foreach loop -->                     
     </tbody>
 </table>

Here is my script:

$(document).ready(function(){
  $("#note1").change(function(){                 
    var stockid = document.getElementById("stockid").value;                    
    var stockname = document.getElementById("stockname").value;                    
    var note1 = document.getElementById("note1").value;      

    alert("The text entered is "+note1);
  });
});

<table id="table1" class="table table-bordered"> 
<thead>
 <tr>
   <th style="display:none;">Stock Code</th>
   <th>Stock Name</th>
   <th>Note 1</th>
   <th>Note 2</th>
   <th>Note 3</th>
   <th>Note 4</th>
   <th>Order Level</th>
   <th>Qty Level</th>
   <th>Balance</th>  
   <th>Purchase Price</th>  
   <th>UOM</th>                    

   @for ($i=0; $i<=12; $i++)
     <th><?php echo date('Y/m', strtotime('-'.$i.' month', strtotime($getDate)));?></th>
   @endfor                                          
</tr>
</thead>
<tbody>
    <!-- Foreach loop from db -->
    @foreach ($query as $val)     
  <tr>                    
    <td style="display:none;">{{ $val->StockCode }}</td>
    <td class="text-nowrap align-middle">{{ $val->StockName }}</td>
    <td><textarea rows="2" cols="10" class="note align-middle" data-something="1_<?php echo $val->StockCode; ?>"></textarea></td>
    <td><textarea rows="2" cols="10" class="note align-middle" data-something="2_<?php echo $val->StockCode; ?>"></textarea></td>
    <td><textarea rows="2" cols="10" class="note align-middle" data-something="3_<?php echo $val->StockCode; ?>"></textarea></td>
    <td><textarea rows="2" cols="10" class="note align-middle" data-something="4_<?php echo $val->StockCode; ?>"></textarea></td>
    <td><input type="text" id="orderlevel" class="text-right"></td>
    <td><input type="text" id="qtylevel" class="text-right"></td>
    <td class="text-right align-middle">{{ number_format($val->CurrentBalance, 2) }}</td>
    <td class="text-right align-middle">{{ number_format($val->PurchasePrice, 2) }}</td>
    <td class="text-center align-middle">{{ $val->BaseUOM }}</td>

    @for ($i=1; $i<=13; $i++)
      <?php 
        //looping variables
        $Qty = 'Qty'.$i;
        $Date = 'Date'.$i;
      ?>
       <td class="text-right align-middle">                                    
         @if($val->$Qty > 0) 
         <a id="viewdetails" data-toggle="modal" 
            data-productid="{{$val->Id}}"
            data-productname="{{$val->StockName}}"
            data-getdate="{{date('Y-m', strtotime($val->$Date))}}"
                                href="#" data-target="#dataModal">{{ number_format($val->$Qty, 2) }}</a>
         @endif
       </td>                                                 
     @endfor 
   </tr> 
   @endforeach  
   <!-- End Foreach loop -->                     
 </tbody>

$(document).ready(function(){
  $(".note").change(function(){  
    var numberAndStockCode = $(this).data("something")
    numberANdStockCode = numberAndStockCode.split('_')
    var stockid = numberAndStockCode[1];                   
    var note1 = document.getElementById("note1").value;      

    alert("Note Number and StockCode" + numberAndStockCode[0] + ' ' + numberAndStockCode[1]);
  });
});

There might be some syntax error related to php, but the concept is, to have click event on class, and read which element is clicked using data attribute of html element.