Question: 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:

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.

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!


Answer:
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.