将数据从文本框复制到其他文本框仅影响第一行

Question

i need your help, please. i have a project needing a textbox (outside table) copy its data (percentage value) to textbox (percentage) inside the table. The problem is the data copied only fill first row textbox table. i hope it copied to entire row table.

<table class='form'>
    <thead>
    <tr>
        <th>Percentage input</th>
        <th>:</th>
        <td><input type='text' id='percentage_input'
    </thead><tbody>

<table>  
        <thead>
        <tr>
            <th width>No.</th>
            <th width>Percentage</th>
            <th width>Score</th>
        </tr></thead><tbody>";
        $i = 1;
$sql_data = $db->database_prepare("SELECT * FROM score")->execute()
while ($data_score = $db->database_fetch_array($sql_data)){

echo "<tr>
   <td>$i</td>
   <td><input type='text' id='percentage' value='0'></td>
   <td>$data_score[score]></td>
  </tr>";
}           
$i++; 
</table>

javascript

$("#percentage_input").keyup(function(){
    $("#percentage").val($(this).val());
    });

it makes me frustate, please give your advice...

Answer 1

using unique id base on $i in the loop

<td><input type='text' id="percentage$i" value='0'></td>

then you can modify your js as

$("#percentage_input").keyup(function(){
$("#percentage1").val($(this).val());
});

if you want to to affect all displayed rows, use a class instead of id.

<td><input type='text' class="percentage" value='0'></td>

$("#percentage_input").keyup(function(){
$(".percentage").val($(this).val());
});