множественная текстовая область работает только с первой строкой в ​​php

Question

У меня есть код, имеющий несколько текстовых областей, для автоматического сохранения значения в базе данных при обновлении данных, по какой-то причине, он просто отлично работает с первой строкой, а остальные строки не действуют. может кто-то помочь с этим?

код, как показано ниже,

</tr><tr>
<?php foreach($queryRecords as $res) :?>
<td width="160">
            <div class="form-group">
                 <textarea name="date" id="date" rows="2" class="form-control"><?php echo $res['date'];?></textarea>  
            </div></td>
<td width="160">
            <div class="form-group"> 
                 <textarea name="action" id="action" rows="2" class="form-control"><?php echo $res['action'];?></textarea>  
            </div></td>

<div class="form-group">  
                 <input type="hidden" name="id" id="id" value="<?php echo $res['id'];?>" />
                 <div id="autoSave_quo"></div>
            </div>  
        </td>
</tr>
<?php endforeach;?>
<script>  
$(document).ready(function(){
var timer_quo;
var timeout_quo = 1000;
$('#date, #action').change(function(){

if(timer_quo) {
clearTimeout(timer_quo);
}
timer_quo = setTimeout(autoSave_quo, timeout_quo); 

});
});

function autoSave_quo(){
       var date = $('#date').val();
       var action = $('#action').val();
       var gp_name = $('#gp_name').val();
       var id = $('#id').val();
   if(date != '' && gp_name != '')  
   {  
        $.ajax({  
             url:"lotus_cover.php",  
             method:"POST",  
                 data:{date:date action:action, gp_name:gp_name, id:id},  
             dataType:"text",  
             success:function(data)  
            {  
                  if(data != '')  
                  {  
                       $('#gp_name').val(data);
                       $('#id').val(id);
                  }  
                  $('#autoSave_quo').text(location.reload());  
            }  
    });  
} 
}   
</script>