Q:

show filtered data in the textbox in php

I want to show my filtered data in the arrays in the textboxes...I’ve been looking in google for days already for the same idea of my program that works but I cant find any help me please.
As you can see my current code doesn’t work and I need your help guys.
example expected output:

html code:
<form name="form" method="get"> 
Search batchcode: <input type="text" id="query" name="search" /><br /> 
<table> 
<tr> 
<td> 
ID: <br /> 
<input id="id1" type="text" name="id1" /> <br /> 
<input id="id2" type="text" name="id2" /> <br /> 
</td> 
<td> 
Name: <br /> 
<input id="name1" type="text" name="name1" /> <br /> 
<input id="name2" type="text" name="name2" /> <br /> 
</td> 
<td> 
Score 1: <br /> 
<input id="optA1" type="text" name="optA1" /> <br /> 
<input id="optA2" type="text" name="optA2" /> <br /> 
</td> 
<td> 
Score 2: <br /> 
<input id="optB1" type="text" name="optB1" /> <br /> 
<input id="optB2" type="text" name="optB2" /> <br /> 
</td> 
<td> 
Other Qualification: <br /> 
<input id="other_qual1" type="text" name="other_qual1" /> <br /> 
<input id="other_qual2" type="text" name="other_qual2" /> <br /> 
</td> 
<td> 
Interview: <br /> 
<input id="interview1" type="text" name="interview1" /> <br /> 
<input id="interview2" type="text" name="interview2" /> <br /> 
</td> 
<td> 
Total: <br /> 
<input id="total1" type="text" name="total1" /> <br /> 
<input id="total2" type="text" name="total2" /> <br /> 
</td> 
</tr> 
</table> 
</form>

script code:
<script type="text/javascript">
$(document).ready(function(){
    $('input[name^=search]').click(function(){
            $.ajax({
            url:"search.php",
            type:"GET",
            data: { term : $('#query').val() },
            dataType:JSON,
            success: function(result) {
                $('#id1').val(result.id).show();
                $('#id2').val(result.id).show();
                $('#name1').val(result.name).show();
                $('#name2').val(result.name).show();
                $('#optA1').val(result.score1).show();
                $('#optA2').val(result.score1).show();
                $('#optA1').val(result.score2).show();
                $('#optA2').val(result.score2).show();
                $('#other_qual1').val(result.other_qual).show();
                $('#other_qual2').val(result.other_qual).show();
                $('#interview1').val(result.interview).show();
                $('#interview2').val(result.interview).show();
                $('#total1').val(result.total).show();
                $('#total2').val(result.total).show();
            }
        });
    })
});      
</script>

search.php page:
<?php

$q = $_GET['term'];

mysql_connect("localhost","root","");
mysql_select_db("test");
header('Content-type: application/json');
$query = mysql_query("SELECT * FROM score WHERE batchcode LIKE '%$q%'");

$data = array();
while($row = mysql_fetch_array($query)){
$data[] = array('value'=>$row['batchcode'], 
'id' => $row['id'], 
'name' => $row['name'], 
'score1' => $row['score1'], 
'score2' => $row['score2'], 
'other_qual' => $row['other_qual'], 
'interview' => $row['interview'], 
'total' => $row['total']
);
}
echo json_encode($data);
?>

when I go to search.php page I get this output:

A:

you are assigning same data to your elements in the ajax callback function .
you need to loop through the data returned from AJAX call and assign it to the various elements
for(i=0;i<data.length;i++){
  //first loop for first set of records and second for second set of records 
  $(selector).val(data.attr);  
}

