電卓を表示して電卓を起動させるようにしたい。またカーソルが電卓から外れたときは電卓の表示を消す

前提・実現したいこと

タイトル通りです。

家計簿のサイトを作っています。
収入の欄にカーソルがきてclickすると電卓が表示されます。
しかし、電卓のボタンを押すと消えてしまいます。



### 該当のソースコード



ここに言語を入力: html
<!-- main:problem_code -->
<HTML>
 <tr>
          <th class="input-group-addon" >収入</th>
          <td><input type="text" placeholder="0" class="income_text"><div id='calc'></div></td>
        </tr>       

<Jquery>
//電卓
$(document).ready(function () {
    $('#calc').calculator().draggable();
  });
  
  $(function () {
    $('#calc').calculator({
      showOn: 'both',
      buttonImageOnly: false,
      buttonImage: 'calculator.png'
  });
});

//電卓表示
$('.income_text').focus(function() {
 
 $('#calc').css('visibility', 'visible');

});

//電卓非表示
$('.income_text').focusout(function(){
  
  $('#calc').css('visibility', 'hidden');

});

<CSS>

#calc{
  width:230px;
  visibility:hidden;
  z-index: 50;
  position: absolute;
}


ソースコード
<!DOCTYPE html>
<html lang="ja">
 <head>
  <meta charset="utf-8">
   <title>家計簿</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="css/bootstrap.css"> 
   <script src="js/jquery-3.4.1.min.js"></script>
   <!-- カレンダー読込 -->
   <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>
   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>
   <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css" >
   <!-- スクロール -->
   <script src="js/jquery.slimscroll.min.js"></script> 
   <!-- カレンダー -->
   <script src='js/jquery-ui-1.10.4.custom.min.js'></script>
   <link rel=stylesheet href='css/jquery-ui.min.css'>
   <script src='js/jquery.thecalculator.js'></script>
   <link rel="stylesheet" href="css/input.css"> 
  </head>
  <body>
    <?php //家計簿の設定画面 ?>
    <header>
      <ul>
        <li><a href="">入力</a></li>
        <li><a href="index.php">カレンダー</a></li>
        <li>レポート</li>
        <li>便利機能</li>
        <li>その他</li>
      </ul>
    </header>
    <form action="" method="get" class="input-group">
    <table>
      <thead>
        <th><a href="input.php">支出</a></th>
        <th><a href="input_income.php">収入</a></th>
      </thead>
      <tr>
          <th class="date">日付</th>
          <!-- プルダウンメニューで表示 -->
            <td>
              <input type="text" id="xxdate" placeholder="<?php echo "Today:".date('Y/m/d');?>">
            </td>
        </tr>
        <tr>
          <td>　</td>
        </tr>
        <tr>
          <th class="input-group-addon">メモ</th>
          <td><input type="text" placeholder="未入力"></td>
        </tr>            
        <tr>
          <td>　</td>
        </tr>
        <tr>
          <th class="input-group-addon" >収入</th>
          <td><input type="text" placeholder="0" class="income_text"><div id='calc'></div></td>
        </tr>       
        <tr>
          <td>　</td><td></td>
        </tr>
    </table>
    <h3>カテゴリー</h3>
    <div class="categories">
    <ul class="category"> 
      <li><label class="category_label"><input type="radio" name="category" value="food_expenses" checked>食費</label></li>      
      <li><label class="category_label"><input type="radio" name="category" value="daily_necessities">日用品</label></li>
      <li><label class="category_label"><input type="radio" name="category" value="clothes">衣服</label></li>
    </ul>
    <ul class="category"> 
      <li><label class="category_label" ><input type="radio" name="category" value="beauty">美容</label></li>
      <li><label class="category_label"><input type="radio" name="category" value="entertainment_expenses">交際費</label></li>
      <li><label class="category_label"><input type="radio" name="category" value="medical_bills">医療費</label></li>           
    </ul>
    <ul class="category"> 
      <li><label class="category_label"><input type="radio" name="category" value="education">教育費</label></li>      
      <li><label class="category_label"><input type="radio" name="category" value="utility_costs">光熱費</label></li>
      <li><label class="category_label"><input type="radio" name="category" value="transportation_expenses">交通費</label></li>
    </ul>
        <ul class="category"> 
      <li><label class="category_label"><input type="radio" name="category" value="communication_costs">通信費</label></li>      
      <li><label class="category_label"><input type="radio" name="category" value="housing_expense">住居費</label></li>
      <li><label class="category_label"><input type="radio" name="category" value="travel_expenses">渡航費</label></li>
    </ul>
    </div> 
    <input type="submit" value="支出を入力する" name="submit" class="btn-danger">
    </form>
    
<script>
  //ボタンタグ：色変更処理
    jQuery( function() {
    jQuery( '.category input[name=category]') . change(
        function () {
            jQuery( '.category input' ) . closest( '.category_label' ) . css( {
                backgroundColor: 'white',
                borderColor: 'gray',
            } );
            jQuery( '.category :checked' ) . closest( '.category_label') . css( {
                backgroundColor: 'white',
                borderColor: 'red',
            } );
        }
    ).change();
} );

//カレンダー表示
$(function() {
  $("#xxdate").datepicker( {
    changeYear: true,  // 年選択をプルダウン化
    changeMonth: true, // 月選択をプルダウン化
    yearRange: "-5:+5" // 現在日付の２年前～５年後まで選択可能
  });
 
  // 日本語化
  $.datepicker.regional['ja'] = {
    closeText: '閉じる',
    prevText: '<前',
    nextText: '次>',
    currentText: '今日',
    monthNames: ['1月','2月','3月','4月','5月','6月',
    '7月','8月','9月','10月','11月','12月'],
    monthNamesShort: ['1月','2月','3月','4月','5月','6月',
    '7月','8月','9月','10月','11月','12月'],
    dayNames: ['日曜日','月曜日','火曜日','水曜日','木曜日','金曜日','土曜日'],
    dayNamesShort: ['日','月','火','水','木','金','土'],
    dayNamesMin: ['日','月','火','水','木','金','土'],
    weekHeader: '週',
    dateFormat: 'yy/mm/dd',
    firstDay: 0,
    isRTL: false,
    showMonthAfterYear: true,
    yearSuffix: '年'};
  $.datepicker.setDefaults($.datepicker.regional['ja']);
});

//スクロール
$(function(){
  $('.categories').slimScroll({
    railVisible: true,
    railColor: '#FF4500',
    position: 'left',
    distance: '396px',
    height:'140px'
  });
});

//電卓
$(document).ready(function () {
    $('#calc').calculator().draggable();
  });
  
  $(function () {
    $('#calc').calculator({
      showOn: 'both',
      buttonImageOnly: false,
      buttonImage: 'calculator.png'
  });
});

//電卓表示
$('.income_text').focus(function() {
 
 $('#calc').css('visibility', 'visible');

});

//電卓非表示
$('.income_text').focusout(function(){
  
  $('#calc').css('visibility', 'hidden');

});
 
 </script>
</body>

css3
1body{
2  width: 1024px;
3  margin:0 auto;
4  font-family: Arial, sans-serif;
5  font-size: 16px;
6}
7
8header ul{
9  display: flex;
10  list-style: none;
11  width: 1024px;
12}
13
14header li{
15  width: 204.8px;
16  text-align: center;
17  background-color: #DDD;
18  padding:10px 0;
19}
20
21header li:hover{
22  cursor: pointer;
23}
24
25header li:hover a{
26  text-decoration: none;
27}
28
29thead th{
30  text-align: right;
31}
32
33table,form{
34  margin: 15px auto;
35  border-collapse: collapse;
36  text-align: center;
37  position: relative;
38}
39
40.category{
41  display: flex;
42  width: 410px;
43}
44
45input[type=radio] {
46  display: none; /* ラジオボタンを非表示にする */
47}
48
49.category li{
50  list-style: none;
51  font-size: 12px;
52}
53
54.category label{
55  width: 110px;
56  height: 60px;
57  border: 1px black solid;
58  border-radius: 10px;
59  list-style: none;
60  padding: 10px;
61  margin:0 5px;
62  cursor: pointer;	/* マウスカーソルの形（リンクカーソル）を指定する */
63}
64
65  /* 年プルダウンの変更 */
66select.ui-datepicker-year{
67  height: 2em!important;      /* 高さ調整 */
68  margin-right:5px!important; /* 「年」との余白設定 */
69  width:70px!important;       /* 幅調整 */
70  color: black;
71  }
72/* 月プルダウンの変更 */
73select.ui-datepicker-month{
74  height: 2em!important;      /* 高さ調整 */
75  margin-left:5px!important;  /* 「年」との余白設定 */
76  width:70px!important;       /* 幅調整 */ 
77}
78
79input[type=submit] {
80  border-radius: 10px;
81}
82
83#calc{
84  width:230px;
85  visibility:hidden;
86  z-index: 50;
87  position: absolute;
88}
89