Table row on click not working

So i've tried out so many of the answers posted on this forum, but when i click on my table, the alert box still doesnt comes out. When i click on the row, it should alert out the 'customername' of the row i have clicked. Here is my code..

<?php
$query="select * from customer";
    $result = mysqli_query($dbconn,$query);
    echo "<table class='customertable' width='2' border=3>
        <tr>
        <th> nric </th> 
        <th> email </th>
        <th> customername </th>
        </tr>";
while($record = mysqli_fetch_array($result)){

            echo "<tr value=".$record['customername'].">";
            echo "<td>"."<input readonly type='text' name='nric' value=".$record['nric']."></td>";                                       
            echo "<td>"."<input readonly  type='text' name='email' value=".$record['email']."></td>";
            echo "<td>"."<input readonly  type='text' name='customername' value=".$record['customername']."></td>";                                    
            echo "</tr>";
        }                                   
    echo "</table>";
?>

<script>
    $(".customertable").on('click','tr',function(e){
e.preventDefault();
var id = $(this).attr('value');
alert(id);
}); 
</script>

Please help me thanks!