id的Javascript动态变量＃

Question

I have a working JS codes (when you click on a cell with id#, it will highlight the cell and the associated row in another table) in the same PHP file and I wish to move it to external JS .js file so that I can re-use for other PHP files.

<td class="text-center" id="grid_B9">Click me to highlight me and other row</td>
<tr id="E3"><td class="text-center"></td>

$page_script .= "$(document).ready(function(){";
foreach ($storage_position_used as $storage_id => $positions)
    // add class 'success' to table row
    foreach ($positions as $storage_position_used) {
        $page_script .= '$("#grid_'.$storage_position_used.'").click(function(){';
        $page_script .= '$("#grid_'.$storage_position_used.'").toggleClass("success");';
        $page_script .= '$("#'.$storage_position_used.'").toggleClass("success");';
        $page_script .= "});";
    }
$page_script .= "});";

My recode in JS external file so far, but is not working. There IS highlight but always on the same cell.

$storage_position_used = storage_position_array($storage_id, 'used');
$page_script .= 'highlight_specimen_row('.json_encode($storage_position_used[$storage_id]).');';   
// highlight_specimen_row(["E2","A3","A1","C1","B1","D1","C9"]);

function highlight_specimen_row (positions_used) {
$(document).ready(function(){
    for (i = 0; i < positions_used.length; i++) {
        var grid_position_id = "grid_"+positions_used[i];
        var position_id = positions_used[i];

        $('#'+grid_position_id).click(function() {
            $('#'+grid_position_id).toggleClass("success");
            $('#'+position_id).toggleClass("success");
        });
    }
});
}

I believe I declared my dynamic variable (grid_position_id and position_id ) wrongly.