I need to add a class to the input wrapper when I click on input, and remove the class when other input is clicked.

I've tiyed toggleClass but it would only remove the class when the same input is clicked again.

I've tried to use functions: find() and closest() but cannot figure exactly which one I need, or in what order they shoudl be called... Any help would be appreciated.

So far here is the code:

<div class=wrapper>

    <label for=name class=required>

        name

    </label>

    <div class=data_area>

        <input type=text id= name= value= title= class= />

    </div>

</div>



<div class=wrapper>

    <label for=other name class=required>

        last name

    </label>

    <div class=data_area>

        <input type=text id= name= value= title= class= />

    </div>

</div>





<script>

    $('.wrapper input').click(function () {

        $(this).parent().addClass('red');

    });

</script>



<style>

.red {background:red;}

</style>