Q:

How to copy part of a tag to another tag?

I want to insert the (ul) tag that comes after the (div) tag in class (copy1).
Then, by clicking on the tag (div) in the class (copy1), insert the (ul) tag after the tag (div) into the class (copy2). The first step is running the code, but I don't know the second step.

$(document).ready(function() {
  $('ul ul').hide();
  $('ul div').click(function() {
    var x = $(this).next().html();
    $('.copy1').html(x);
  })

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
    <div>01</div>
    <ul>
      <li>01-01</li>
      <li>
        <div>01-02</div>
        <ul>
          <li>01-02-01</li>
          <li>01-02-02</li>
          <li>01-02-03</li>
        </ul>
      </li>
      <li>01-03</li>
    </ul>
  </li>
  <li>
    <div>02</div>
    <ul>
      <li>02-01</li>
      <li>02-02</li>
      <li>02-03</li>
    </ul>
  </li>
</ul>

<hr>


<ul class="copy1"></ul>
<ul class="copy2"></ul>

After clicking on the first div tag, the following values are inserted into the copy1 class.
 01-01 
 01-02 
 01-03 
But by clicking on 01-02 the following values
 01-02-01 
 01-02-02 
 01-02-03 
Those that are in the copy1 class are not copied to the Copy2 class.

A:

Because the elements in .copy1 are created dynamically, you either need to add events after they are created or use event delegation
  $(document).on("click", ".copy1 div", function() { ...

as you want copy1->copy2, it needs to be separate from the src->copy1 code (or have additional logic within the click handler).
In the snippet below, I've kept them separate for clarity.  I've also added some css to show which ones can be clicked as it was slightly confusing that 01-01 does nothing as there are no child nodes.

$(document).ready(function() {
  $('ul ul').hide();
  $('ul div').click(function() {
    var x = $(this).next().html();
    $('.copy1').html(x);
  })
  $(document).on("click", ".copy1 div", function() {
    var x = $(this).next().html();
    $('.copy2').html(x);
  });

});
ul div { color: red }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
    <div>01</div>
    <ul>
      <li>01-01</li>
      <li>
        <div>01-02</div>
        <ul>
          <li>01-02-01</li>
          <li>01-02-02</li>
          <li>01-02-03</li>
        </ul>
      </li>
      <li>01-03</li>
    </ul>
  </li>
  <li>
    <div>02</div>
    <ul>
      <li>02-01</li>
      <li>02-02</li>
      <li>02-03</li>
    </ul>
  </li>
</ul>

<hr>


<ul class="copy1"></ul>
<ul class="copy2"></ul>

