How to achieve the effect shown in the picture below_html/css_WEB-ITnose

I would like to ask how to achieve the effect shown in the picture below. Select the name in the left frame and click the ">>" button. The selected name will automatically appear in the right frame and disappear in the left frame.

Reply to the discussion (solution)

Two ListBox plus Hidden plus Js, there should be a lot of code online for Js operation ListBox

In fact, delete one on the left element, add an element on the right

Two ListBox plus Hidden plus Js, there should be a lot of code online for Js to operate ListBox
It seems that there is no listbox tag in HTML, right? ? ? ?

As a side note, I want to use HTML to implement

which is effective but not beautiful. . . .

<script></script> $(document).ready(function(){
var s = "";
var g = "";
$("#toRight").click(function(){
if(s!==""&&s!=null&&g=="left"){
$(".right").append(s);
$("p").removeClass( "select");
}
});
$("#toLeft").click(function(){
if(s!==""&&s!=null&&g==" right"){

$(".left").append(s);
$("p").removeClass("select");
}
});
$("p").click(function(){
$("p").removeClass("select");
$(this).addClass("select")
s = $(this);
g = $(this).parent().attr("class");
});
});

"right">