pass multiple parameters to a javascript and update html content bases on both parameters + php loop

Question

I have form that uses jquery to fetch mysql data with an external php page.

the script is essentially an autocomplete for an input field. trouble is that I have the input field in a loop, field ID is being determine by the counter '$i' in the loop.

as such I want to pass the user entered value of the input box to the javascript along with the counter value '$i' so that the javascript can return the result to the correct input box in the loop.

I hope that makes sense.

the original and working code for a single input box is below:

Javascript

<script type="text/javascript">
    function lookup(inputString) {
        if(inputString.length == 0) {
            // Hide the suggestion box.
            $('#suggestions').hide();
        } else {
            $.post("autocompleteperson.php", {queryString: ""+inputString+""}, function(data){
                if(data.length >0) {
                    $('#suggestions').show();
                    $('#autoSuggestionsList').html(data);
                }
            });
        }
    } // lookup

    function fill(thisValue) {
        $('#inputString').val(thisValue);
        setTimeout("$('#suggestions').hide();", 200);
    }
</script>

HTML

<div>
    <input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />
</div>
<div class="suggestionsBox" id="suggestions" style="display: none;">
    <img src="upArrow.png" style="position: relative; top: -12px; left: 20px;" alt="upArrow" />
    <div class="suggestionList" id="autoSuggestionsList">
        &nbsp;
    </div>
</div>  

So what I want to do is pass the row number ($i) to the javascript as well so that it returns the value to the correct input box. My basic attempts at this are below [apologies for my lack of javascript skill :-) ]

Javascript

<script type="text/javascript">
    function lookup(rownumber, inputString) {
        if(inputString.length == 0) {
            // Hide the suggestion box.
            $('#suggestions').hide();
        } else {
            $.post("autocompleteperson.php", {queryString: ""+(inputString+rownumber)+""}, function(data){
                if(data.length >0) {
                    $('#suggestions').show();
                    $('#autoSuggestionsList').html(data);
                }
            });
        }
    } // lookup

    function fill(thisValue) {
        $('#inputString'+'rownumber').val(thisValue);
        setTimeout("$('#suggestions').hide();", 200);
    }
</script>

PHP / HTML

<table>
<?  for ( $i = 1; $i <=50; $i++ ) { ?>
            <tr>
                <td>
                    <div>
                        <input type="text" size="30" value="" id="inputString<? echo  $i; ?>" onkeyup="lookup(<? echo  $i; ?>,this.value);" onblur="fill();" />
                    </div>
                    <div class="suggestionsBox" id="suggestions" style="display: none;">
                        <img src="upArrow.png" style="position: relative; top: -12px; left: 20px;" alt="upArrow" />
                        <div class="suggestionList" id="autoSuggestionsList">
                            &nbsp;
                        </div>
                    </div>  
                </td>
            </tr>
        <? } ?>
</table>

The second part of the question would be getting the div suggestionbox to appear in the correct place as well. The same applies where I would like the name of the suggestionbox to append the row number '$i'.

Any help would be appreciated.

Kind Regards,

UPDATED CODE

javascript

<script type="text/javascript">
    function lookup(inputString) {
        if(inputString.length == 0) {
            // Hide the suggestion box.
            $('#suggestions').hide();
        } else {
            $.post("autocompleteperson.php", {queryString: ""+inputString+""}, function(data){
                if(data.length >0) {
                    $('#suggestions').show();
                    $('#autoSuggestionsList').html(data);
                }
            });
        }
    } // lookup

function fill(rownumber, thisValue) { // add the rownumber as a parameter
        $('#inputString'+rownumber).val(thisValue); // remove the quotation marks
        setTimeout("$('#suggestions').hide();", 200);
    }
</script>

HTML/PHP

<table>
<?
    for ( $i = 1; $i <=50; $i++ ) { 
        ?>
            <tr>
                <td> Job <? echo  $i; ?></td>
                <td>
                    <SELECT NAME=job<? echo $i; ?> id=job<? echo $i; ?> style="width:150px;border: 1px solid #2608c3;color:red"> 
                    <OPTION VALUE=0 ></option>
                    <option>
                    <?=$optionjobs?> 
                    </option>
                    </SELECT>
                </td>
                <td> Person </td>
                <td>
                    <div>
                        <input type="text" size="30" value="" id="inputString<? echo  $i; ?>" onkeyup="lookup(<? echo  $i; ?>,this.value);" onblur="fill(<? echo  $i; ?>,this.value);" />
                    </div>
                    <div class="suggestionsBox" id="suggestions" style="display: none;">
                        <img src="upArrow.png" style="position: relative; top: -12px; left: 20px;" alt="upArrow" />
                        <div class="suggestionList" id="autoSuggestionsList">
                            &nbsp;
                        </div>
                    </div>  
                </td>
            </tr>
        <?
            }
        ?>
</table>

Answer 1

first of all, in the basic code that works, you're calling fill() without giving any parameters whereas in the javascript, you're waiting for thisValue .

Now for your problem, let's take your fill function and do some modifications

    function fill(rownumber, thisValue) { // add the rownumber as a parameter
        $('#inputString'+rownumber).val(thisValue); // remove the quotation marks
        setTimeout("$('#suggestions').hide();", 200);
    }

and in the HTML file

[...]
<div>
<input type="text" size="30" value="" id="inputString<? echo  $i; ?>" onkeyup="lookup(<? echo  $i; ?>,this.value);" onblur="fill(<? echo  $i; ?>,this.value);" />
[...]

simply add in the fill() function the needed parameters.