jquery onclick id & values of html elements

Question

I have a table of records where each row has got a save button. would someone please help me to get the id of the button and values of two inputs on button click

<input class="price" name="price" id="price_<?= $value['i_id'] ?>" value="<?= &cost ?>" />                         
<input type="hidden" id="<?= $value['i_id'] ?>_suffix" value="<?= $value['suffix'] ?>" /> 
<button type="button" class="sp-save btn btn-xs btn-primary btn-bell m-l-xs" id="save_<?= $value['i_id'] ?>">SAVE</button> 

jquery

 save_id = $(this).attr(\'id\'); 
          id = save_id.replace( /save_/, \' \' ); //this is id of the button
price = $(\'#\'+\'price_\'+id).val(); // values comes undefined         

s_id = $(\'#\'+id+\'_suffix\').val();  //values comes undefined

Answer 1

It's a good idea to use a data attribute to set and retrieve id on button click. Below, I added a data attribute to the button and used jQuery's data() to get the id on click.

<input class="price" name="price" id="price_<?= $value['i_id'] ?>" value="<?= &cost ?>" />                         
<input type="hidden" id="<?= $value['i_id'] ?>_suffix" value="<?= $value['suffix'] ?>" /> 
<button type="button" class="sp-save btn btn-xs btn-primary btn-bell m-l-xs" id="save_<?= $value['i_id'] ?>" data-id="<?= $value['i_id'] ?>">SAVE</button>

jQuery:

id = $(this).data('id');       
price = $('#'+'price_'+id).val();         
s_id = $('#'+id+'_suffix').val();