想要在jquery中显示表中特定行的文本框

I want to display the text box and its update button for which the row I click to edit my value.

In the above image When I click edit discount to change the discount value for the booking id 6, it shows all the text boxes in all rows like

<table id="example1" class="table table-bordered table-striped">
         <td><?php echo $bookedrow['status'];?></td>
       <td class="discount_val"><?php echo $bookedrow['discount'];?></td>
       <td class="new_discount">
         <input type="text" name="new_discount"/>
          <input class="btn btn-primary" id="update" name="update" value="Update" type="submit"/>
        </td>
       <td><a href="#" class="edit_discount">Edit discount</a></td>
            </tr>
               </tbody>
        </table>

JS code:

       $('.new_discount').hide();   
 $('.edit_discount').click(function(){
    $('.discount_val').hide(); 
    $('.new_discount').show();

 });

Now i want to get the text box and its button for which I'm selecting to update and that value will update for that particular id only.Guide me!!

You need to use DOM traversal functions to find just the element in the current row:

$('.edit_discount').click(function() {
    var row = $(this).closest("tr");
    row.find(".discount_val").hide();
    row.find(".new_discount").show();
});

Smart Chaining Can do it in one line...

 $('.new_discount').hide();   
 $('.edit_discount').click(function(){

     $(this).parent("tr").find(".discount_val").hide().end().find(".new_discount").show();

 });

You have to do a better select. $('.discount_val') matches all Elements with the class discount_val. You could get the parent of the clicked <a> and anly sleect the elements with class discount_val under this element.

var parent = $(this).parent("tr");
$('.discount_val', parent).hide();
$('.new_discount', parent).show();

Try this code

$('.edit_discount').click(function(){
    $(this).closest('tr').find('.discount_val').hide();
    $(this).closest('tr').find('.new_discount').show(); 
});