I am working on a code where i have multiple div's generated dynamically. My problem is to get current hidden elements value on click of a link to that particular div(e.g when i click on Add to Favorites it should alert the value of task_for hidden input). My code is working fine with one div but if there is multiple divs it alerts the first element's value. Here is my code-
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="search_box_list">
<a href="javascript:void(0)" class="add_fav"><i class="fa fa-star-o" aria-hidden="true"></i>Add to favourites</a>
<div class="n_s">'+value.user_name+'</div><div class="n_e">'+value.user_email+'</div>
<div class="n_n">'+value.user_phone+'</div>
<div class="n_d">'+value.user_designation+'</div><div class="n_d">
<button type="button" id="assign" class="assign_task" class="btn btn-default">
<input type="hidden" name="for_id" class="task_for" value="'+value.user_id+'" />
<input type="hidden" name="for_id" class="email" value="'+value.user_email+'" /> Assign Task
</button>
</div>
</div>
</div>
and the jquery
$("body").on('click','.add_fav',function(){
var who_id=<?php echo $_SESSION['global']['uid'] ?>;
var whom_id=$(document).find(".task_for").val();
alert(whom_id)
});