Change icon class in Jquery with multiple forms

Question

I have a 10 forms in my page.

I get the current form like that:

        var form = $(this).parents('form:first');

What I need is to update icon inside my form from warning to success when I make an AJAX call.

But when I do it, all the 10 icons ( 1 x form ) change.

How can I select just 1?

Here is my code:

$('.save_category').on('click', function (e) {
        e.preventDefault();
        var form = $(this).parents('form:first');
        var tournamentId =   form.data('tournament');
        var categoryId =   form.data('category');
        var settingId =  form.data('setting');

        // I omitted AJAX Call for more readability

        $('.status-icon').removeClass();
        $('.status-icon').addClass('glyphicon glyphicon-ok text-success status-icon');
}

How can I do to reach this particular icon ???

My HTML:

@foreach($tournament->categoryTournaments as $key => $categoryTournament)
          <div class="panel ">
              <div class="row">
                  <div class="col-md-11">
                      <a data-toggle="collapse" data-parent="#accordion-styled"
                         href="#accordion-styled-group{!! $key !!}">

                          <div class="panel-heading">
                              <h6 class="panel-title">
                                  {{trans($categoryTournament->category->name)}}
                              </h6>
                          </div>
                      </a>
                  </div>
                  <div class="col-md-1">
                      <div class="panel-heading">
                          @if (is_null($setting))
                              <i class="glyphicon  glyphicon-exclamation-sign text-orange-600 status-icon"></i>
                          @else
                              <i class="glyphicon glyphicon-ok text-success status-icon"></i>
                          @endif
                      </div>
                  </div>

              </div>
              <div id="accordion-styled-group{!! $key !!}"
                   class="panel-collapse collapse">
                  <div class="panel-body">
                      {{--FORM--}}
                      @include('categories.categorySettings')
                  </div>

              </div>
          </div>
          @endforeach

Answer 1

Try this :

$(this)
    .closest('form')
    .find('.status-icon')
    .removeClass()
    .addClass('glyphicon glyphicon-ok text-success status-icon');