$(() => { 

	$("#btnShow").dxButton({
	    text: 'Show',
	    width: '100px',
	    text: 'Details',
          onClick() {
            popup.option({
              contentTemplate: () => popupContentTemplate(),
            });
            popup.show();
          },
	});

  //let employee = null;
for (let index = 0; index < array.length; index++) {
	const element = array[index];
	  const popupContentTemplate = function () {
	   return $('<div>').append(
	      $(`<p><span>${'FirstName'}</span><span>${'LastName'}</span></p>`),
	    );
	  };
}

  const popup = $('#popup').dxPopup({
    contentTemplate: popupContentTemplate,
    width: 500,
    height: 500,
    container: '.dx-viewport',
    showTitle: true,
    title: 'Client Variables',
    visible: false,
    hideOnOutsideClick: true,
    showCloseButton: false,
    position: {
      at: 'center',
      my: 'center',
    },
    toolbarItems: [{
      widget: 'dxButton',
      toolbar: 'bottom',
      location: 'after',
      options: {
        text: 'Close',
        onClick() {
          popup.hide();
        },
      },
    }],
  }).dxPopup('instance');

});