Modal with input label update

HTML

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title></title>
   <!-- Font Awesome -->
   <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
         rel="stylesheet" />
   <!-- Google Fonts -->
   <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
         rel="stylesheet" />
   <!-- MDB -->
   <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.1.0/mdb.min.css"
         rel="stylesheet" />
   <script src="https://code.jquery.com/jquery-3.6.3.min.js"
           integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU="
           crossorigin="anonymous"></script>
   <script src="https://www.jsviews.com/download/jsrender.js"></script>
​
   <script id="tpl_profile2" type="text/x-jsrender">
      <div style="padding: 20px; ">
         <div class="form-outline" style="width: 22rem;">
            <input value="{{:value}}" type="text" id="form11" class="form-control">
            <label class="form-label" for="form11" style="margin-left: 0px;">{{:title}}</label>
            <div class="form-notch"><div class="form-notch-leading" style="width: 9px;"></div><div class="form-notch-middle" style="width: 87.2px;"></div><div class="form-notch-trailing"></div></div>
         </div>
      </div>
   </script>
</head>
<body>
​
   <div style="padding: 20px; ">
      <button type="button" class="btn btn-primary" onclick="mybootbox()">
         Bootbox
      </button>
   </div>
​
   <script>
​
      function mybootbox() {
         // var html = $.templates('#tpl_profile2').render({});
         // let message = document.getElementById('tpl_profile2').innerHTML;
         let message = $.templates('#tpl_profile2').render({ title: 'Exmple label', value: '123a' });
​
         bootbox.alert({
            title: 'title',
            message: message, callback: function () {
               console.log('callback');
            }
         });
      }
   </script>
​
   <!-- MDB -->
   <script type="text/javascript"
           src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.1.0/mdb.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/6.0.0/bootbox.min.js" integrity="sha512-oVbWSv2O4y1UzvExJMHaHcaib4wsBMS5tEP3/YkMP6GmkwRJAa79Jwsv+Y/w7w2Vb/98/Xhvck10LyJweB8Jsw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
​
​
</body>
</html>

CSS

​

xxxxxxxxxx
 
document.addEventListener('show.mdb.modal', () => {
  document.querySelectorAll('.form-outline').forEach((formOutline) => {
  new mdb.Input(formOutline).update();
});
})
​

Console errors: 0