title: How to reload function (tempus dominus) after modifying DOM element with jQuery
body: <p><br />
  I am using tempus dominus for date selection in a form in my booking site.<br />
  Some dates need to be disabled so I am passing an array of dates to disable from php to twig.<br />
  This array is in 2 dimensions:<br />
  1) the apartment to rent<br />
  2) the unavailable dates for the latter<br /></p>
  
  <p>When the user chooses an apartment, the variable "home" is updated on click with the new value and I update the attribute "hValue" as well in an hidden div.
  Then I try to use this "hValue" to access what I want in the array of dates inside datetimepicker <code>disableDatesPerHomeStart[homeValue]</code>.</p>
  
  <p>But of course the value is not updated as the function has already been loaded... In other words, inside datetimepicker I always get the initial value of homeValue, not the chosen one in the form.<br />
  I tried to trigger an event inside the .click to call again datetimepicker but it doesn't work...</p>
  
  <p>Here is the code:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="form-group"&gt;
      {{ form_label(form.startDate) }}
      &lt;div class="input-group date dateStart" id="datetimepicker1" data-target-input="nearest"&gt;
          {{ form_widget(form.startDate, {'attr': {'type': 'text', 'class': 'form-control datetimepicker-input', 'data-target':'#datetimepicker1'}}) }}
          &lt;div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker"&gt;
              &lt;div class="input-group-text"&gt;&lt;i class="fa fa-calendar-alt"&gt;&lt;/i&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="homeValue d-none" hValue=""&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre><code>$(function () {
      var home = $('#contact_home').val();
      $('.homeValue').attr('hValue', home);
      var homeValue =  $('.homeValue').attr('hValue');
      var disableDatesPerHomeStart = {{ unavailableDatesForStartComplete|json_encode|raw }};
      var disableDatesPerHomeEnd = {{ unavailableDatesForEndComplete|json_encode|raw }};
  
  
      $('#contact_home').click(function (c) {
          home = $('#contact_home').val();
          $('.homeValue').attr('hValue', home);
          homeValue = $('.homeValue').attr('hValue');
          var event = jQuery.Event("myEvent");
          $('body').trigger(event);
      });
  
      $('.dateStart').datetimepicker({
          locale: 'fr',
          format: 'L',
          disabledDates: disableDatesPerHomeStart[homeValue],
          icons: {
                  time: "fas fa-clock",
                  date: "fas fa-calendar-alt",
                  up: "fas fa-angle-up",
                  down: "fas fa-angle-down"
              }
      });
  
      $('.dateEnd').datetimepicker({
          useCurrent: false,
          locale: 'fr',
          format: 'L',
          disabledDates: disableDatesPerHomeEnd[homeValue],
          icons: {
                  time: "fas fa-clock",
                  date: "fas fa-calendar-alt",
                  up: "fas fa-angle-up",
                  down: "fas fa-angle-down"
              }
      });
  
      $('body').on('myEvent',function(){
          $('.dateStart').datetimepicker('disabledDates', disableDatesPerHomeStart[homeValue]);
          $('.dateEnd').datetimepicker('disabledDates', disableDatesPerHomeEnd[homeValue]);
      });
  });
  </code></pre>
  
  <p>I am new to jQuery/javascript so maybe I miss something obvious. </p>
  
  <p>How can I pass the new value to the datetimepicker?<br />
  Thanks</p>