JSFiddle - React, Tailwind, and code Playground

HTML

<h1>
Array A
</h1>
<div id="arrA">

</div>

<h1>
Array B
</h1>
<div id="arrB">

</div>

JavaScript

var arrA = [1, 2, 3, 4, 5];
var arrB = [];

printArrayToDiv(arrA, arrB, 'arrA', moveElementFromAToB);

function printArrayToDiv(array, otherArray, divId, moveFunction) {
	var e = document.getElementById(divId);
  var newHtmlContent = '<ul>';
  for (var i = 0; i < array.length; i++) {
  	newHtmlContent += '<li><button id="' + divId + '' + i + '">' + array[i] + '</button></li>';
  }
  newHtmlContent += '</ul>';
  e.innerHTML = newHtmlContent;
  for (var i = 0; i < array.length; i++) {
  	document.getElementById(divId + '' + i).addEventListener("click", function() {
    	var index = parseInt(this.id.substr(4));
    	moveFunction.call(null, index);
			printArrayToDiv(arrA, arrB, 'arrA', moveElementFromAToB);
			printArrayToDiv(arrB, arrA, 'arrB', moveElementFromBToA);
    })
  }
}

function moveElementFromAToB(index) {
	moveElement(index, arrA, arrB);
}

function moveElementFromBToA(index) {
	moveElement(index, arrB, arrA);
}

function moveElement(index, fromArray, toArray) {
	toArray.push(fromArray[index]);
  fromArray.splice(index, 1);
}