Consider the following: 

I have 2 `<div>`

```
<div class="panel-body">
    //some parent class for each textbox
    <input type="text" class="required" id="txtA"></input>
    <input type="text" class="required" id="txtB"></input>
    <button class="submitButton">A</button>
</div>

<div class="panel-body">
    //some parent class for each textbox
    <input type="text" class="required" id="txtC"></input>
    <input type="text" class="required" id="txtD"></input>
    <input type="text" class="required" id="txtE"></input>
    <button class="submitButton">B</button>
</div>

```

and my jQuery code: 

```
$(document).ready(function () {
    $('.submitButton').click(function (e) {
        var errorLess = true;
        $(".TextError").remove();
        $(".required").each(function () {
            $(this).parent().parent().removeClass("has-error");
            if ($(this).val() == "") {
                $(this).parent().parent().addClass("has-error");
                $('<span class=\"TextError\">This field is required!</span>').insertAfter(this);
                errorLess = false;
            }
        });
        return errorLess;
    });
});

```

How can I, in a way, validate only the fields in the div when the button contained, is clicked? 

Meaning, when I click on button `A`, it will only validate `txtA` and `txtB`. When I click on button `B`, it will validate `txtC`, `txtD`, and `txtE`? 

How do I have to modify the jQuery code in order for it to work this way?