How can I simplify my jQuery code to avoid repeating instructions?

Novice trying to simplify my jQuery, to avoid repetition

I am a novice with Javascript and jQuery, but have written some code to display a tooltip on a form depending on the answer selected to a dropdown. Right now I am repeating the steps twice:

1. Once to check the dropdown on page load, in case it has reloaded due to a submission error - in this case, if an answer has been selected to that question, it will persist, and I need the tooltip to remain.

2. Once to check whenever the dropdown value changes.

The value of the dropdown is a number, so I've used that in the div classes to show the appropriate div. This is the code which is working fine:

$(document).ready(function(){
    var service = "";
    var otherservice = "";

    // Check for select value on page load, in case it has refreshed due to a form error

    service = '.v' + $('select#989022_58716pi_989022_58716 option:selected').val();
    otherservice = '#form-tooltips div:not('+service+')';
    $('#form-tooltips div'+service).show();
    $(otherservice).hide();

    // Check again for select value, every time that selection changes

    $('select#989022_58716pi_989022_58716').on('change', function(){
    	service = '.v' + $('select#989022_58716pi_989022_58716 option:selected').val();
        otherservice = '#form-tooltips div:not('+service+')';
       	$('#form-tooltips div'+service).show();
        $(otherservice).hide();
    });
});

//The tooltips for display

$("<div id='form-tooltips'><div class='v1381962'>Tooltip 1</div><div class='v1381965'>Tooltip 2</div></div>").insertAfter(".add-tooltip-after");

What I would like to do is create a function - checkTooltip - so that I do not have to repeat those tooltip instructions the second time. I have tried the following:

$(document).ready(function(){
    var service = '';
    var otherservice = '';
    function checkTooltip({
        service = '.v' + $('select#989022_58716pi_989022_58716 option:selected').val();
        otherservice = '#form-tooltips div:not("+service+")';
       	$('#form-tooltips div'+service).show();
        $(otherservice).hide();
    });
    checkTooltip();
    $('select#989022_58716pi_989022_58716').on('change', checkTooltip());
});
$("<div id='form-tooltips'><div class='v1381962'>Tooltip 1</div><div class='v1381965'>Tooltip 2</div></div>").insertAfter(".add-tooltip-after");

However this is not working. In the Chrome console, it says Uncaught SyntaxError: Unexpected token ';' on the 5th line. I have tried removing that semicolon but then it gives me Unexpected identifier 'otherservice' instead.

Am I completely misunderstanding how this works or making some kind of syntax error? Many thanks in advance to anyone who can help!

The syntax is definitely wrong, but in the function definition. It should look like this. No guarantees on whether the functionality is correct.:

$(document).ready(function(){
    let service = '';
    let otherservice = '';
    const checkTooltip = () => {
        service = '.v' + $('select#989022_58716pi_989022_58716 option:selected').val();
        otherservice = '#form-tooltips div:not("+service+")';
        $('#form-tooltips div'+service).show();
        $(otherservice).hide();
    }
    checkTooltip();
    $('select#989022_58716pi_989022_58716').on('change', checkTooltip);
});

Note the change in the on.change handler at the end too.

Also its out of scope for your question but 989022_58716pi_989022_58716 probably could be rewritten with a more human-readable id or class.