Why does the accordion works just once?

Question

I'm trying to get this effect:

When I open the dialog for the first time everything works fine. But if I close the dialog and open it again this is what I see:

Does someone knows how to fix it? This is the part of my code:

function showLicenses(cluster_id) {
    // get licenses from window object
  var licenses = window.licenses[cluster_id];
    $('#accordion-cluster').html('');
  // sort reverse timestamp
  licenses = licenses.sort(function(a, b){
    return new Date(b.date_created) - new Date(a.date_created);
  });

  $.each(licenses, function(index, license){
    console.log(license);
    var id = license.license_id;
    var licenseNo = index + 1;
    if(licenseNo !== 1){
      //$("#accordion-cluster").append('<hr><br>')
    }
    $("#accordion-cluster").append('<h2> LICENSE ' + licenseNo + '<a class="removeLicense" style="background:#c8212f;color:white;padding:5px;margin:15px;position:absolute;top: 0;right: 0;" data-license-id="' + license.license_id + '">remove</a></h2><div>' + license.key_contents + '</div>');
  });
  $("#dialog").dialog({
      height: 500,
      width: 800,
      modal: true,
      open: function(){
          var icons = {
              header: "ui-icon-triangle-1-s",    // custom icon class
              activeHeader: "ui-icon-triangle-1-n" // custom icon class
          };
          console.log($("#accordion-cluster"));
          $("#accordion-cluster").accordion({
              collapsible : true,
              active : 'none',
              icons: icons
          });
      }
  });
  $.LoadingOverlay("hide");
}

And the HTML:

<div id="dialog" title="License Key">
    <div style="white-space: pre-wrap;" id="license-key">
         <div id="accordion-cluster">

         </div>
    </div>
</div>

To answer to the comments, this is the appearance of the opened accordion (just the first time i open the dialog box):

Answer 1

You have to destroy the accordion before changing the data inside, the best timing to do this is when closing the dialog:

$("#dialog").dialog({
    height: 500,
    width: 800,
    modal: true,
    open: function () {
        var icons = {
            header: "ui-icon-triangle-1-s",    // custom icon class
            activeHeader: "ui-icon-triangle-1-n" // custom icon class
        };

        $("#accordion-cluster").accordion({
            collapsible : true,
            active : 'none',
            icons: icons
        });
    },
    close: function () {
        $('#accordion-cluster').accordion('destroy');
    }
});

Related question that helped me: re-initialize jquery accordion on callback Do note that the referenced question is not a duplicate, because of the fact this question involves a dialog.