Q:

Html-Javascript create select fied to and fro box

I need to create select box which select values to/fro from another box on double click or by using add/remove button
--------------------           --------------------                     
|    data1         |           |      data1       |
|    data2         |   Add-->  |                  |
|    data3         | <--Remove |                  |
|    data4         |           |                  |
|    data5         |           |                  |
|    data6         |           |                  |
--------------------           --------------------

I only know select and option method which gives dropdown menu. 
I have searched google for it but didn't find any specific help with this so I am not even able to start with it. 
Please help me with a method to get started. 
Thanks

A:

This code makes you move elements from a box to another with double click. 

$('#box1').on('dblclick', '.element', function(){
  $('#box2').append($(this));

})

$('#box2').on('dblclick', '.element', function(){
  $('#box1').append($(this));

})
#box1, #box2{
  float:left;
  text-align: center;
  margin-right: 20px;
  width: 150px;
  border: 1px solid black;
  min-height: 150px;

}

.element{
  border: 1px solid red;
  background: yellow;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="box1">
  <div class="element">Element 1</div>
  <div class="element">Element 2</div>
  <div class="element">Element 3</div>
  <div class="element">Element 4</div>
</div>

<div id="box2">

  
</div>

