on second+ clicks backdrop still has old settings.

[Scnck]

any idea why this isn't working correctly, I'm changing the backdrop value but I still getting the previous settings on the jstree after the first click?

			var settings = {
				content: '<form class="form-inline">\
							<div class="custom-control custom-switch">\
							  <input type="checkbox" class="custom-control-input" id="customSwitch1" name="customSwitch1">\
							  <label class="custom-control-label" for="customSwitch1">enable backdrop</label>\
							</div>\
							<button id="Xsave" name="Xsave" type="submit" class="btn btn-primary btn-sm ml-2"><i class="fas fa-check"></i></button>\
							<button id="Xclose" name="Xclose" "type="button" class="btn btn-secondary btn-sm rounded-right ml-1"><i class="fas fa-times"></i></button>\
						   </form>',
				backdrop: eval(localStorage.getItem("backdrop")),
				cache: false,
				width: 'auto',
				placement: 'right',
				animation:'pop',
				onShow: function(e) {
				//https://stackoverflow.com/questions/48584885/jstree-add-button-to-node-with-html-and-rename-with-context-menu
					var clickedElement = $(e).data('trigger-element');
					var form = $(e).find('form');
					
					var backdrop = eval(localStorage.getItem("backdrop"));
					form.find("#customSwitch1").prop("checked", backdrop)
					
					form.on('click', '#Xsave', function (e) {
						e.preventDefault();
						
						var backdrop = form.find('#customSwitch1').prop('checked');
						localStorage.setItem("backdrop", eval(backdrop));
						
						// Getting current state...
						var getCollapsed = $.map($table.find('tbody > tr.groupBy.collapsed'), function(element) {return $(element).attr("data-group-index");});
						var scrollpx = $table.bootstrapTable('getScrollPosition');
				
						var data = $table.bootstrapTable('getData');
						$table.bootstrapTable('load', data)
						
						// Restoring previous state...
						getCollapsed.forEach(index => $table.find(sprintf('tr[data-group-index=%1$s]', index)).click());	
						$table.bootstrapTable('scrollTo', {unit: 'px', value: scrollpx})
						
						clickedElement.webuiPopover('hide');
					}).on('click', '#Xclose', function (e) {
						e.preventDefault();
						e.stopPropagation(); // Stop event propagation is needed, otherwise may trigger the document body click event handled by plugin.
						
						clickedElement.webuiPopover('hide');
					})
				}
			}

				}).on("click.jstree", '#Settings_anchor', function (event, data) {
					event.stopPropagation(); // Stop event propagation is needed, otherwise may trigger the document body click event handled by plugin.
					$('#Settings_anchor').webuiPopover('destroy').webuiPopover($.extend({}, settings, { backdrop: eval(localStorage.getItem("backdrop")) }));
					$('#Settings_anchor').webuiPopover('show')