My code looks like this:

2.      var firstInput = $('#user-login-form :input:enabled:visible:first');
3.      firstInput.focus();
4.      firstInput.addClass('dirty');
5.      firstInput.prev('label').addClass('dirty');
6. 
   
7.      $('.js-signInButton').click(function(e){
8.         e.preventDefault();
9.         $('#edit-email').focus();
10.         var firstInput = $('#user-login-form :input:enabled:visible:first'); 
11.         firstInput.focus();
12.         firstInput.addClass('dirty');
13.         firstInput.prev('label').addClass('dirty');
14.       });
15. 
    
16.      $('.js-registerButton').click(function(e){
17.         e.preventDefault();
18.         $('#edit-firstname').focus();
19.         var firstInput = $('#user-register-form :input:enabled:visible:first');
20.         firstInput.focus();
21.         firstInput.addClass('dirty');
22.         firstInput.prev('label').addClass('dirty');
23.       });

However as you can see the part which put the focus on the first input is repeating almost 3 times with the difference that var firstInput has different values.

The code is working but it doesn't look nice and clean. How can I make a function from the part which put the focus on the first input and call it whenever I need it?

Thanks