onclick setting value for input in nested forms

Question

I am trying to set is_deleted to true on clicking remove. I am partially done with it but when I click on remove it just set the all nested departments to is_deleted true. Here is my parent form:

 .h3 Process Step = f.fields_for :departments do |d| %div.fields = render 'department_fields', :f => d %div.fields = link_to_add_fields "Add Department", f, :departments Here is my nested_form %div.fields#department_fields = f.input :title = f.text_field :is_deleted, id: "is_deleted", class: "is_deleted" .remove_department remove 

Here is my javascript:

:javascript $(document).on('click', '.remove_department', function () { $('.is_deleted').val('1'); }) 

Here is my generated html:

<div class="col-sm-2 col-md-offset-1" style="outline: 1px solid black;"> <div class="h3">Process Step</div> <div class="fields"> <div class="fields" id="department_fields"> <div class="form-group string required dealership_departments_title"><label class="string required control-label" for="dealership_departments_attributes_0_title"><abbr title="required">*</abbr> Title</label><input class="string required form-control" id="dealership_departments_attributes_0_title" name="dealership[departments_attributes][0][title]" type="text" value="test"></div> <input class="is_deleted" id="is_deleted" name="dealership[departments_attributes][0][is_deleted]" type="text" value="1"> <div class="remove_department">remove</div> </div> <script> $(document).on('click', '.remove_department', function () { //e.stopPropagation(); //alert($('.is_deleted').val()); $('.is_deleted').val('1'); //$(this).parent().hide(); }) </script> </div> <input id="dealership_departments_attributes_0_id" name="dealership[departments_attributes][0][id]" type="hidden" value="7"><div class="fields"> <div class="fields" id="department_fields"> <div class="form-group string required dealership_departments_title"><label class="string required control-label" for="dealership_departments_attributes_1_title"><abbr title="required">*</abbr> Title</label><input class="string required form-control" id="dealership_departments_attributes_1_title" name="dealership[departments_attributes][1][title]" type="text" value="Check In"></div> <input class="is_deleted" id="is_deleted" name="dealership[departments_attributes][1][is_deleted]" type="text"> <div class="remove_department">remove</div> </div> <script> $(document).on('click', '.remove_department', function () { //e.stopPropagation(); //alert($('.is_deleted').val()); $('.is_deleted').val('1'); //$(this).parent().hide(); }) </script> </div> 

What I want to is set value of is_deleted to true on clicking "remove" related to that field

Answer 1

This :

:javascript $(document).on('click', '.remove_department', function () { // change this - > $('.is_deleted').val('1'); to -> $(this).siblings('.is_deleted').val('1'); }) 

Answer 2

I just solved it my self.

 $('.remove_department').on('click', function(event) { $(this).prev().val('1'); })