​I have check in and check out button in portal header , my need is that, default hide the check out button, after  clicking the check in button it will show the check out button and hide the check in . Based on my code i get that when i click the check in button the page will reload again and the check in button remain the same . How i solve this, am using odoo 16 Community.Here is my code.

XML:

XML code in the comment box






Js:

odoo.define('check_in_out.checked', function (require) {
"use strict";

var ajax = require('web.ajax');

$(document).ready(function() {
$('.check-in-btn').click(function() {
$(this).hide();
$('.check-out-btn').show();
});

$('.check-out-btn').click(function() {
$(this).hide();
$('.check-in-btn').show();
});
});
});


Thanks