Hide and show different children elements based on click

Question

So I'm trying to 'move' elements between boxes, I've hid a set of LIs in a div element and left a perfect copy of the hidden elements in a different div visable, the idea is that once you click a visable li the hidden one gets visable and the clicked element hidden creating the illusion of moving the element itself. I've managed to get the first cycle working but I want to endlessly be moving these elements back and forth and got stuck in the process.

There might be better ways of doing what I'm trying to do but this was the only way I could make it somewhat work, suggestions are appreciated.

I also couldnt find any jquery extention that does this, if there is one I would love being referred to it.

$(document).ready(function() {

		
  $('.container li').click(function() {
  	var id = $(this).attr('id');
    var text = $(this).text();
    
    $('.box' + id + ' ' + '.' +text).show("fast");
    $(this).hide();
  });
  
 $('.group li').click(function() {
   	var id = $(this).attr('id');
    var text = $(this).text();
 	
  	$('.container ' + '#' + id + ' '  + '.' + text).show();
    $(this).hide();
 
 });
  
});

body {

  background:#666;

}

.box1, .box2, .box3 {
  display:inline-block;
  margin:1%;
  width:30%;
  background:rgba(255,255,255, .5);
  text-align:center;
  color:white;
}

.box1 h1, .box2 h1, .box3 h1 {
  margin:0;
}

.box1 hr, .box2 hr, .box3 hr {
  width:80%;
}

.container {
  width:95%;
  background:rgba(255,255,255, .5);
  margin-left:1%;
  margin-top:3%;
  padding:1%;
}

.container li, .box1 li, .box2 li, .box3 li {
  list-style-type:none;
  padding:1%;
  background:rgba(0,0,0,.2);
  width:20%;
  display:inline-block;
  border:1px solid rgba(0,0,0,.5);
  margin-bottom:2%;
}

.container li:hover, .container li:focus {
  border-color:red;
  color:white;
  cursor:pointer;
}

.group li {
  width:80%;
  margin-left:8%;
  cursor:pointer;
}

.box1 li, .box2 li, .box3 li {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="group box1">
  <h1>box1</h1>
  <hr>
  <li class="Item1" id="1">Item1</li>
  <li class="Item2" id="1">Item2</li>
  <li class="Item3" id="1">Item3</li>
</div>


<div class="group box2">
  <h1>box 2</h1>
  <hr>
  <li class="Item1" id="2">Item1</li>
  <li class="Item2" id="2">Item2</li>
  <li class="Item3" id="2">Item3</li>
</div>

<div class="group box3">
  <h1>box3</h1>
  <hr>
  <li class="Item1" id="3">Item1</li>
  <li class="Item2" id="3">Item2</li>
  <li class="Item3" id="3">Item3</li>
</div>

<div class="container">
<li class="Item1" id="1">Item1</li>
<li class="Item2" id="1">Item2</li>
<li class="Item3" id="1">Item3</li>

<li class="Item1" id="2">Item1</li>
<li class="Item2" id="2">Item2</li>
<li class="item3" id="2">Item3</li>

<li class="Item1" id="3">Item1</li>
<li class="Item2" id="3">Item2</li>
<li class="Item3" id="3">Item3</li>
</div>

Answer 1

Firstly, if you are to use li, then you need to keep the semantics right by placing a ul tag as its parent.

I have used a div instead. Here, you can use the append() to move the item from one place to another. In the on-click event, the append would move the element from the source to the target element,

$(document).ready(function() {

  $('.container .item').click(function() {
    var box = $(this).attr('box');
    $(`.box${box}`).append($(this));
  });

  $('.box').on('click', '.item', function() {
    $(`.container`).append($(this));
  });

});

body {
  background: #666;
}

.group {
  display: flex;
  margin-bottom: 1em;
}

.group .box {
  border: 1px solid rgba(0, 0, 0, .5);
  flex-grow: 1;
  flex-basis: 0;
  padding: 1em;
}

.container {
  background: rgba(255, 255, 255, .5);
  padding: 1em;
  display: flex;
  flex-wrap: wrap;
}

.container .item,
.group .item {
  padding: 2em;
  border: 1px solid rgba(0, 0, 0, .5);
  margin-bottom: 1em;
  margin-right: 1em;
}

.group .item {
  margin-right: 0em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="group">
  <div class="box box1">
    <h1>box1</h1>
    <hr>
  </div>
  <div class="box box2">
    <h1>box 2</h1>
    <hr>
  </div>

  <div class="box box3">
    <h1>box3</h1>
    <hr>
  </div>
</div>

<div class="container">
  <div class="item" box="1">Item1</div>
  <div class="item" box="1">Item1</div>
  <div class="item" box="1">Item1</div>
  <div class="item" box="2">Item2</div>
  <div class="item" box="2">Item2</div>
  <div class="item" box="2">Item2</div>
  <div class="item" box="3">Item3</div>
  <div class="item" box="3">Item3</div>
  <div class="item" box="3">Item3</div>
</div>