this find label in a form does not work

Question

I have two forms of the same class in a page. These forms are exactly the same with the same elements. On submitting one of them, I try to access the elements inside. Here is what the forms look like:

<form role="form" class="login-form" id="login-form">
                  {% csrf_token %}
                <div class="form-group">
                  <div class="input-icon">
                    <i class="icon fa fa-user"></i>
                    <input type="text" class="form-control" name="email" placeholder="Username" id="email">
                  </div>
                </div>
                <div class="form-group">
                  <div class="input-icon">
                    <i class="icon fa fa-unlock-alt"></i>
                    <input type="password" class="form-control" placeholder="Password" name="password" id="password">
                  </div>
                </div>
                <div>
                  <!--input type="checkbox" id="remember" name="rememberme" value="forever" style="float: left;"-->
                  <label style="display: none; color: red;" id="incorrect_info">Veuillez vérifier vos informations</label>
                </div>

                <button class="btn btn-common log-btn">Se connecter</button>
              </form>

Now the javascript where I try to access the elements:

$('.login-form').submit(function(e){
    e.preventDefault();
    // Get information

    email = $(this).find('input[id="email"]').val();
    pass = $(this).find('input[id="password"]').val();
    $(this).find('label[id="incorrect_info"]').css('display','block');

});

This code works for the inputs, but not for the label, which is not found.

EDIT :

Sorry here is actually how the code looks like. The find is called in the ajax done.

$('.login-form').submit(function(e){
    e.preventDefault();
    // Get information

    email = $(this).find('input[id="email"]').val();
    pass = $(this).find('input[id="password"]').val();

    $.ajax({
        .......
    }).done(function (data) {
        if (data.success) {
            window.location.href = data.url;
        }
        else {
            $(this).find('label[id="incorrect_info"]').css('display','block');
        }
    });

});

Answer 1

I figured this out. The problem is that $(this) scope is different inside the ajax function. What I've done is to save it before getting into it, and reused it after:

$('.login-form').submit(function(e){
    e.preventDefault();
    // Get information

    this_form = $(this);

    email = $(this).find('input[id="email"]').val();
    pass = $(this).find('input[id="password"]').val();

    $.ajax({
        ......
        success  : function(data, status){
        }
    }).done(function (data) {
        if (data.success) {
            window.location.href = data.url;
        }
        else {
            this_form.find('label[id="incorrect_info"]').css('display','block');
        }
    });

});