Appending a DOM element twice (jQuery)

Question 1

Because using append actually moves the element. So your code was moving $foo into the document at #a, then moving it from #a to #b. You could clone it instead like this for your desired affect - this way it is appending a clone rather than the initial element:

$(function(){
    var $foo = $("<foo>HI</foo>");
    $("#a").append($foo.clone());
    $("#b").append($foo.clone());
});

You could also append the html from $foo, which would just take a copy of the dom within it rather than the element itself:

$(function(){
    var $foo = $("<foo>HI</foo>");
    $("#a").append($foo[0].outerHTML);
    $("#b").append($foo[0].outerHTML);
});

The above examples are assuming you have a more complicated scenario where $foo isn't just a jQuery object created from a string... more likely it is created from an element in your DOM.

If it is in fact just simply created this way and for this purpose... there is no reason at all to create that jQuery object to begin with, you could simply append the string itself ("<foo>HI</foo>") directly, like:

var foo = "<foo>HI</foo>";
$("#a").append(foo);
//...

Question 2

Try clone. This, as the name implies, will copy the $foo element and not move, like append will do.

$(function(){
    var $foo = $("<foo>HI</foo>");
    $("#a").append($foo.clone());
    $("#b").append($foo.clone());
});

But, why not just use this?

$("#a,#b").append($foo);

This will also work :)

Here's a demo for both these situations : http://jsfiddle.net/hungerpain/sCvs7/3/

Question 3

You need to create a new instance every single time you want to append to the DOM.

Otherwise it refers to the same instance which was already appended.

Remove the $ symbol preceding the new div to be added as that evaluates to a jQuery object and has the limitations as above stated. or clone the element.

$(function(){
    var foo = "<foo>HI</foo>";
    $("#a").append(foo);
    $("#b").append(foo);
});

Check Fiddle

Question 4

You can use the .clone() method to create a new instance to append to the DOM, since your current code just refers to the same instance twice.

$(function(){
    var $foo = $("<foo>HI</foo>");
    var $foo2 = foo.clone();
    $("#a").append($foo);
    $("#b").append($foo2);
});

Question 5

I tried a trick and it worked. I just nested the function of one button click in another. i mean I am changing the parent every time to avoid this issue. the main thing is that when i am writing the click function for button1 click the button2 logic is written under that and the button3 click logic is written inside button2 click method like a hierarchy. Just see the code. you will get it.

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
      integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
      crossorigin="anonymous"
    />

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>DOM Element Inserting!</h1>
    <div id="parent">
      <div id="result">
        <button id="btn1" type="submit" class="btn btn-primary">
          Start Cooking
        </button>
      </div>
    </div>
    <div id="parent2"></div>
    <div id="parent3"></div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script
      src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
      integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
      integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
      crossorigin="anonymous"
    ></script>
    <script>
      $(document).ready(function () {
        $("#btn1").click(function () {
          $("#lt").remove();
          $("#parent2").html(`

                <button id="btn2" type="button" class="btn btn-success">
        Being Prepared
      </button>
                `);
          $("#btn1").remove();
          $("#btn2").click(function () {
            $("#parent3").html(`

                <button id="btn3" type="button" class="btn btn-info">
        Order Ready
      </button>
                `);
            $("#parent2").remove();
            $("#btn3").click(function () {
              alert("Order Completed!!");
            });
          });
        });
      });
    </script>
  </body>
</html>