JQuery click works after refreshing the page
<p>My deepest apologizes. Here is the link of my question for which I really need assistance. the below query, I have already fixed.</p>

<p>Please help me out anyone.</p>

<p><strong><a href="https://stackoverflow.com/questions/40521007/drag-and-drop-from-localstorage-html5-not-working">Drag and Drop from localstorage HTML5 not working</a></strong></p>

<p>I prepared the some drag and drop widgets in HTML, CSS, JQuery. 
Drag and drop works fine. I made an icon to show for the dragged widgets once it is dropped in the place required. The icon shows fine once dropped. </p>

<p>I wanted to remove the widget when we click on the close icon. But it doesn't remove the widget. I tried to refresh the page to see whether it works after that. And it is. I'm not sure why JQuery behaves this way. </p>

<p>I tried to look for the solution. I could see many solutions. But nothing fix my problem. Anyone could help?</p>

<p>Below is the code I have used:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>/* ----- JavaScript ----- */
$(function() {
  if (localStorage.length != 0) {
    for (var i = 0; i &lt; localStorage.length; i++) {
      var dropClass = localStorage.key(i);
      var clonediv = $("." + dropClass.substr(4, dropClass.length - 4)).clone();
      var droppable = $("#droppable");
      droppable.append(clonediv.draggable({
        helper: 'original',
        revert: 'valid',
        containment: "#droppable",
        grid: [30, 30],
        snap: true
      }).resizable({
        containment: "#droppable"
      }));
      clonediv.find('a').removeClass("displayblock");
      console.log(clonediv);
    }
  } else {}

  $(".bat_voltage").draggable({
    revert: true,
    grid: [30, 30]
  });
  $(".left_flight").draggable({
    revert: true,
    grid: [30, 30]
  });
  $(".cnt_flight").draggable({
    revert: true,
    grid: [30, 30]
  });
  $("#droppable").droppable({
    drop: function(event, ui) {
      var dragged = ui.draggable;
      var id = dragged.attr("class").split(' ');
      var droppable = $("#droppable");
      var find = (droppable.find("." + id[0]));
      console.log(find);
      if (find.length != 0) {} else {
        ui.helper.css({
          'top': 0,
          'left': 0,
          'position': 'relative'
        });
        ui.helper.clone().appendTo("#droppable").draggable({
          containment: "#droppable",
          grid: [30, 30],
          snap: true
        }).resizable({
          containment: "#droppable"
        });
        droppable.find("." + id[0]).find('a').removeClass("displayblock");
        localStorage.setItem("drop" + id[0], droppable);
      }
    }
  });
  $("#change").click(function() {
    var bat_value = parseInt($("#bat_level").val());
    if (bat_value &gt; 25) {
      progressValue(bat_value, "Green");
    } else if (bat_value &gt; 15 &amp;&amp; bat_value &lt; 25) {
      progressValue(bat_value, "Yellow");
    } else if (bat_value &lt; 15) {
      progressValue(bat_value, "Red");
    }
  });

  $(".boxclose").click(function() {
    alert("remove widget");
    var par = $(this).parent();
    var id = par.attr("class").split(' ');
    var droppable = $("#droppable");
    var removing = droppable.find("." + id[0]);
    removing.remove();
    localStorage.removeItem("drop" + id[0]);
  });
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>/* ----- CSS ----- */
.bat_voltage {
  width: 250px;
  height: 100px;
  padding: 0.5em;
  margin: 10px 10px 10px 0;
  z-index: 1;
}
.floatleft {
  float: left;
}
.left_flight {
  width: 250px;
  height: 100px;
  padding: 0.5em;
  margin: 10px 10px 10px 0;
  z-index: 1;
}
.cnt_flight {
  width: 250px;
  height: 100px;
  padding: 0.5em;
  margin: 10px 10px 10px 0;
  z-index: 1;
}
#droppable {
  width: 50%;
  height: 400px;
  padding: 0.5em;
  margin: 10px;
  resize: both;
  border: 2px;
  overflow: auto;
}
#progressbar {
  width: 200px;
  height: 50px;
  margin-top: 20px;
}
a.boxclose {
  float: right;
  margin-top: -10px;
  margin-right: -10px;
  cursor: pointer;
  color: #fff;
  border: 1px solid #AEAEAE;
  border-radius: 8px;
  background: #605F61;
  font-size: 21px;
  font-weight: bold;
  display: inline-block;
  line-height: 0px;
  padding: 8px 3px;
  display: block;
}
.displaynone {
  display: none !important;
}
.displayblock {
  display: none !important;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!----- HTML -----&gt;
&lt;HTML&gt;
  &lt;HEAD&gt;
    &lt;link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"&gt;
    &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.js"&gt;&lt;/script&gt;
    &lt;script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;/HEAD&gt;

  &lt;body&gt;
    &lt;form id="form1" runat="server"&gt;
      &lt;div&gt;
        &lt;div&gt;
          &lt;div class="bat_voltage floatleft ui-widget-content"&gt;
            &lt;a class="boxclose displayblock"&gt;×&lt;/a&gt;
            &lt;p&gt;Battery Voltage&lt;/p&gt;
          &lt;/div&gt;

          &lt;div class="left_flight floatleft ui-widget-content"&gt;
            &lt;a class="boxclose displayblock"&gt;×&lt;/a&gt;
            &lt;p&gt;Flight Time Left&lt;/p&gt;
          &lt;/div&gt;

          &lt;div class="cnt_flight floatleft ui-widget-content"&gt;
            &lt;a class="boxclose displayblock"&gt;×&lt;/a&gt;
            &lt;p&gt;Current Flight Time&lt;/p&gt;
            &lt;div class="curFlight"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div style="clear:both"&gt;&lt;/div&gt;
        &lt;/div&gt;

        &lt;div id="droppable" class="ui-widget-header"&gt;
          &lt;p&gt;Drop here&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/body&gt;
&lt;/HTML&gt;</code></pre>
</div>
</div>
</p>