Перемещение ввода между divs

Question

Пытается переместить пользовательский ввод от одного div к другому с помощью кнопки перемещения, вперед и назад. Даже если имеется несколько входов, можно перемещать выбранный вход от одного к другому. Пока он перемещает все входы в поле «1» в поле «2». Я пытаюсь переместить только одну строку вперед и назад.

Пробовал различные вещи, все еще изучая это. Любые указатели на то, что мне нужно посмотреть, чтобы достичь этого? ` Любая помощь приветствуется.

var number = []; 
 

 
function myNotes() { 
 
    var x = document.getElementById("field1"); 
 
    number.push(document.getElementById("input").value); 
 
    x.innerHTML = number.join('<input type="button" value="move" onclick="move();"/><br/>'); 
 
} 
 

 
function move() { 
 
    $('#field1').appendTo('#field2') 
 
}

form { 
 
    display: inline; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <input id="input" type=text> 
 
</form> 
 
<input type=submit onclick="myNotes();" value="Send"> 
 

 
<br> 
 
<span id='displaytitle'></span> 
 
<h2>Field 1</h2> 
 
<div id="field1"></div> 
 
<h2>Field 2</h2> 
 
<div id="field2"></div>

JSFIDDLE

Answer 1

У вас есть смесь Javascript и JQuery собирается это своего рода трудно понять. Я взбитый пример этого с помощью JQuery, так как вы, кажется, его в своем проекте в любом случае:

https://jsfiddle.net/j5mvq6L5/7/

HTML:

<form> 
    <input id="input" type=text> 
</form> 
<input type=submit id="btnSend" value="Send"> 

<br> 
<span id='displaytitle'></span> 
<h2>Field 1</h2> 
<div id="field1" class="field"></div> 
<h2>Field 2</h2> 
<div id="field2" class="field"></div> 

JS:

CSS:

form { 
    display: inline; 
} 

.btnMove { 
    margin-left: .5em; 
}