JSFiddle - React, Tailwind, and code Playground

https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.11/jquery.mask.min.js

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://rawgit.com/digitalBush/jquery.maskedinput/master/dist/jquery.maskedinput.min.js"></script>
<ul>

  <li>
    name :
    <input type "text" autocomplete="off" />
    <br />
  </li>
  <li>
    code :
    <input type "text" autocomplete="off" />
    <br />
  </li>
  <li class="classdate">
    date :
    <input id='date' class='thedate' type "text" autocomplete="off" />
    <br />
  </li>
  <li>
    date :
    <input id='date2' class='thedate' type "text" autocomplete="off" />
  </li>
</ul>

JavaScript

jQuery(function($) {
  $(document).on('click', '.thedate', function() {
    //  $("li.classdate").closest().css("color", "red");
   var theid = $(this).

    //$(".classdate")
      closest('li').find('input')
      .attr('id');
//alert(theid);
    var me = theid;
    //alert(me);
    me.datepicker({
      showOn: 'focus',
      altFormat: "mm/dd/yy",
      dateFormat: "mm/dd/yy",
      minDate: '12/12/2000',
      maxDate: '12/12/2020'
    }).focus();
  }).on('focus', theid, function() {
    var me = theid);
    me.mask('99/99/9999');
  });
});