title: How to get the value of an element by traversing to parent div
body: <p>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-   </p>
  
  <pre><code>&lt;div class="col-md-4 col-sm-4 col-xs-12"&gt;
  &lt;div class="search_box_list"&gt;
  &lt;a href="javascript:void(0)" class="add_fav"&gt;&lt;i class="fa fa-star-o" aria-hidden="true"&gt;&lt;/i&gt;Add to favourites&lt;/a&gt;
  &lt;div class="n_s"&gt;'+value.user_name+'&lt;/div&gt;&lt;div class="n_e"&gt;'+value.user_email+'&lt;/div&gt;
  &lt;div class="n_n"&gt;'+value.user_phone+'&lt;/div&gt;
  &lt;div class="n_d"&gt;'+value.user_designation+'&lt;/div&gt;&lt;div class="n_d"&gt;
  &lt;button type="button" id="assign" class="assign_task" class="btn btn-default"&gt;
  &lt;input type="hidden" name="for_id" class="task_for" value="'+value.user_id+'" /&gt;
  &lt;input type="hidden" name="for_id" class="email" value="'+value.user_email+'" /&gt; Assign Task
  &lt;/button&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the jquery </p>
  
  <pre><code>$("body").on('click','.add_fav',function(){
    var who_id=&lt;?php echo $_SESSION['global']['uid'] ?&gt;;
    var whom_id=$(document).find(".task_for").val();
    alert(whom_id)
  });
  </code></pre>