jquery - Javascript function works only on second click -

i'm trying prescription details of particular patient , corresponding result displayed in modal window. problem first result obtained on 2nd click. on successive click result of previous data obtained. below html:

<table class="table">     <thead>         <tr class="text-center" style="font-weight: bold">             <td></td>             <td>name</td>             <td>id</td>             <td>age</td>             <td>registered on</td>             <td>view prescription</td>         </tr>     </thead>     <tr class="text-center">         <td><input name="name" type="text"></td>         <td><input name="id" type="text"></td>         <td><input name="age" type="text"></td>         <td><input name="reg_on" type="text"></td>         <td>             <button id="view_prescription_from_patient_list" value="register" onclick="view_prescription_from_patient_list(this.value)">                 <span class="glyphicon glyphicon-share"></span>             </button>         </td>     </tr>     <div class="modal_show"></div> 

function view_prescription_from_patient_list(patient_id) {     var datastring = "get_what=prescription_list_for_patient_list&patient_id=" + patient_id;     $.ajax({         type: "get",         url: "ajax_get_data.php",         data: datastring,         datatype: "html",         success: function(response) {             $('.modal_show').append(response);         }     }) } 

i tried on.click method within javascript has same problem.

since using jquery can wire "onclick" event of button using jquery.

you need wire event handler this.

$(document).ready(function() {     $('#view_prescription_from_patient_list').on('click', function(e) {         e.preventdefault();          var patientid = $(this).parent().parent().find('input[name=id]').val();          // ajax call here...     }); });