How to call jquery script inside echo of php

Question

In following code i want to insert a jquery script: I have mentioned the space in code where i want to insert the jquery code:

<?php
        $no     = 1;
        $total  = 0;
        while ($row = mysqli_fetch_array($query)) {
            $stu  = $row['stu_id'] == 0 ? '' : number_format($row['stu_id']);
            echo '<tr>
                    <td>'.$no.'</td>
                    <td>'.$row['student_id'].'</td>
                    <input type="hidden" name="student_id[]" value='.$row['student_id'].'>
                    <td style="text-align: left;">'.$row['student_name'].'</td>
                    <input type="hidden" name="student_name[]" value='.$row['student_name'].'>
                    <td>'."<input name='obtmarks[]' placeholder='' class='form-control'  type='number' required='required' style='width: 120px;'>".'</td>

                    <td>'."<input name='percentage[]' placeholder='' class='form-control'  type='number' required='required' style='width: 120px;'>".'</td>

 Here i want to add jquery script

                    <input type="hidden" name="class[]" value='.$row['class'].'>
                    <input type="hidden" name="test_date[]" value='.$TestDate.'>
                    <input type="hidden" name="test_subject[]" value='.$SelectSubject.'>
                    <input type="hidden" name="test_type[]" value='.$TestType.'>

                </tr>';

            $total += $row['stu_id'];
            $no++;

        }

        ?>

JQuery script is as under:-

<script>
var SecondNumVal = "20";

function ShowPercentage() {

    var $inputs = $('input');

    // get values
    var firstNumVal = $inputs.eq(0).val();


    // compute something
    var percentVal = (firstNumVal / SecondNumVal) * 100;

    // set value
    $inputs.eq(1).val(parseInt(percentVal) + '%').prop('readonly', true);

}

$(document).ready(function() {
  $('#mysecondnumber').on('change blur', ShowPercentage);
});
</script>

Answer 1

php will get executed before rendering the page . Jquery has role only after page render. If you want to add custom function to every field, use a class and select all elements with that class and do the stuff there. You can write script anywhere in the page and it will get executed. No need to add into the place where it needs to be executed.

Answer 2

As other answers have pointed out, you don't need to include the script in each row for it to work. Also, as I've mentioned in the comments, $inputs refer to the inputs in the whole document, not each tr , and even if it did, $inputs.eq(0) would then refer to the first input in the row, which is student_id . Simplified example (added new classes to the input and changed percentage to type="text" ), you just have to call this script on $.ready

 // Delegate on the table to listen for changes in obtmark fields. // Less event listeners to attach $('#marks').on('change', '.obtmark', function() { var SecondNumVal = "20"; $mark = $(this) var firstNumVal = $mark.val(); // Find the tr this control is in and the corresponding percentage field $pct = $mark.closest('tr').find('.percentage') percentVal = (firstNumVal / SecondNumVal) * 100 pct = parseInt(percentVal) + '%'; $pct.val(pct).attr('readonly', true); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="marks"> <tr> <td><input name='obtmarks[]' placeholder='' class='form-control obtmark' type='number' required='required' style='width: 120px;'></td> <td><input name='percentage[]' placeholder='' class='form-control percentage' type='text' required='required' style='width: 120px;'></td> </tr> <tr> <td><input name='obtmarks[]' placeholder='' class='form-control obtmark' type='number' required='required' style='width: 120px;'></td> <td><input name='percentage[]' placeholder='' class='form-control percentage' type='text' required='required' style='width: 120px;'></td> </tr> <tr> <td><input name='obtmarks[]' placeholder='' class='form-control obtmark' type='number' required='required' style='width: 120px;'></td> <td><input name='percentage[]' placeholder='' class='form-control percentage' type='text' required='required' style='width: 120px;'></td> </tr> </table>