Trying to overcome additional tags added by .append() of jQuery

[Jack_Tauson_Sr]

I’ve the following JsFiddle where I’m creating the message of the dialog using jQuery.

In my actual code, whenever I’m calling the dialog, the Update the counter checkbox is getting created twice (I’m not able ot produce same issue in JSFiddle but I’m sure this might be a common problem?). If I bring a diaog three times then I see the checkbox three times. What can I do to fix this?

[kicken]

Why are you appending it when opening the dialog rather than just making it a static part of the dialog? Make your dialog like a template, with placeholder elements for anything that needs to change. For example:

  <div id="dialog-confirm" title="Select your choice!?">
    <p>Next suggested value is <span class="case-number"></span></p>
    <p>
      <input type="checkbox" id="update_counter_checkbox" name="update_counter_checkbox">
      Update the counter
    </p>
  </div>

Set the content of the case number div when you open the dialog.

  const $dlg = $("#dialog-confirm");
  $dlg.find('.case-number').text(additionalValue);
  $dlg.dialog({
    resizable: false,
    height: "auto",
    width: 400,
    modal: true,
    buttons: buttons
  });

[Jack_Tauson_Sr]

Keeping it like this is printing Next suggested value is and Update counter checkbox on my page before even the dialog is opened. And when the dialog opens up, it disappears from the background (page) where it was showing originally before opening the page.Should I hide these two paragraphs when my page loads? It’s not visible in modified JSFiddle but it’s happening in my code:

[Jack_Tauson_Sr]

@kicken

#dialog-confirm

So I added a css for #dialog-confirm {display:none;} and it seems to have stopped behaving like that.