title: jQuery replace DIV to INPUT and vice versa
body: <p>I am implementing an inline edit kind of functionality.</p>
  <p>So initially a date label (say 05/01/1999) will be displayed and on click of it, it would be replaced with an input box with the same value (05/01/1999). Now user can select any date using the jQuery UI date picker and on select of any date (say 05/01/2005), I would again show a label (05/01/2005)</p>
  <p>Currently I am using the below code;</p>
  <pre><code>$(document).on(&quot;click&quot;,&quot;.editableDateTxt&quot;, function () {
      var currElmModelAttr = $(this).attr('data-model-attr');
      var input = $('&lt;input /&gt;', {'type': 'text','name':currElmModelAttr, 'style':'width:100px','class':'datePicker', 'value': $(this).html()});
      var parent = $(this).parent();
      parent.append(input);
      $(this).remove();
      input.datepicker().focus();
  });
  </code></pre>
  <p>What is the best way to implement the same?</p>
  <p>Now here is the crucial point: I am using <strong>jQuery UI datepicker</strong>, which uses the jQuery data() internally. So I do not want to loose it while jumping from div &gt; input and vice versa.</p>
  <p>How can I modify the above code to consider that the jQuery data() info stays?</p>
  <h2>Updated code</h2>
  <pre><code> var MyView = BaseModalView.extend({
              el: &quot;#myModalContainer&quot;,
              initialize: function() {
                  var self = this;
              
              },
  
  render: function() {
                  var self = this,
                      $el = $(self.el);
                  
                  $el.find(&quot;.datePicker&quot;).datepicker();
                  self.initEventListeners();
              },
  
  initEventListeners: function() {
                  var self = this, 
                      $el = $(self.el);
  
          var $this;
  $(document).on(&quot;click&quot;, &quot;.editableDateTxt&quot;, function () {
      var currElmModelId = $(this).attr('data-model-id');
      var currElmModelAttr = $(this).attr('data-model-attr');
      $this = $(this);
      var input = $('&lt;input /&gt;', {
              'type': 'text',
              'name': currElmModelAttr,
              'data-model-id': currElmModelId, 
              'data-model-attr': currElmModelAttr,
              'style': 'width:100px',
              'class': 'datePicker',
              'value': $(this).text()
      });
      $(this).replaceWith(input);
      input.datepicker({
          onSelect: function (date) {
              $this.text(date);
              input.replaceWith($this);
              // input.blur();
          }
      }).focus();
      $(document).on(&quot;blur change&quot;, &quot;input&quot;, function () {
          setTimeout(function () {
              var value = input.val();
              $this.text(value);
              input.replaceWith($this);
          }, 100);
  
      });
  
  });
  
  }
  </code></pre>