muath-ye/choose.html

## choose.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Choose</title>
</head>

<body>
    <style>
        div#choose {
            display: flex;
            margin: 1em;
            padding: 1em;
        }

        div#choose select,
        div#choose div {
            margin: 1em;
        }

        div#choose div {
            flex-direction: column;
            display: flex;
        }

        div#choose select {
            min-width: 10em;
            width: auto;
            max-width: 20em;
        }

        div#choose div input {
            margin: 1em;
        }
    </style>
    <div id="choose">
        <select name="deselected" id="deselected" multiple>
            <option value="one">one</option>
            <option value="two">two</option>
            <option value="three">three</option>
            <option value="four">four</option>
            <option value="five">five</option>
            <option value="six">six</option>
            <option value="seven">seven</option>
            <option value="eight">eight</option>
            <option value="nine">nine</option>
            <option value="ten">ten</option>
        </select>
        <div class="inputs">
            <input type="button" value="add all" id="add_all">
            <input type="button" value="add" id="add">
            <input type="button" value="remove" id="remove">
            <input type="button" value="remove all" id="remove_all">
        </div>
        <select name="selected" id="selected" multiple>

        </select>
    </div>
    <script>
        function add() {
            var selectBox = document.getElementById('deselected');
            var newBox = document.getElementById('selected');

            var counter = 0;
            while (counter < selectBox.options.length) {
                if (selectBox.options[counter].selected) {
                    newBox.add(selectBox.options[counter]);
                    continue;
                }
                counter++;
            }
        }

        function remove() {
            var selectBox = document.getElementById('selected');
            var newBox = document.getElementById('deselected');

            var counter = 0;
            while (counter < selectBox.options.length) {
                if (selectBox.options[counter].selected) {
                    newBox.add(selectBox.options[counter]);
                    continue;
                }
                counter++;
            }
        }

        function addAll() {
            var selectBox = document.getElementById('deselected');
            var newBox = document.getElementById('selected');

            while (selectBox.options.length > 0) {
                newBox.add(selectBox.options[0]);
            }
        }

        function removeAll() {
            var selectBox = document.getElementById('selected');
            var newBox = document.getElementById('deselected');

            while (selectBox.options.length > 0) {
                newBox.add(selectBox.options[0]);
            }
        }

        document.getElementById("add_all").addEventListener("click", addAll);
        document.getElementById("remove_all").addEventListener("click", removeAll);
        document.getElementById("add").addEventListener("click", add);
        document.getElementById("remove").addEventListener("click", remove);
    </script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Choose</title>
	</head>

	<body>
	<style>
	div#choose {
	display: flex;
	margin: 1em;
	padding: 1em;
	}

	div#choose select,
	div#choose div {
	margin: 1em;
	}

	div#choose div {
	flex-direction: column;
	display: flex;
	}

	div#choose select {
	min-width: 10em;
	width: auto;
	max-width: 20em;
	}

	div#choose div input {
	margin: 1em;
	}
	</style>
	<div id="choose">
	<select name="deselected" id="deselected" multiple>
	<option value="one">one</option>
	<option value="two">two</option>
	<option value="three">three</option>
	<option value="four">four</option>
	<option value="five">five</option>
	<option value="six">six</option>
	<option value="seven">seven</option>
	<option value="eight">eight</option>
	<option value="nine">nine</option>
	<option value="ten">ten</option>
	</select>
	<div class="inputs">
	<input type="button" value="add all" id="add_all">
	<input type="button" value="add" id="add">
	<input type="button" value="remove" id="remove">
	<input type="button" value="remove all" id="remove_all">
	</div>
	<select name="selected" id="selected" multiple>

	</select>
	</div>
	<script>
	function add() {
	var selectBox = document.getElementById('deselected');
	var newBox = document.getElementById('selected');

	var counter = 0;
	while (counter < selectBox.options.length) {
	if (selectBox.options[counter].selected) {
	newBox.add(selectBox.options[counter]);
	continue;
	}
	counter++;
	}
	}

	function remove() {
	var selectBox = document.getElementById('selected');
	var newBox = document.getElementById('deselected');

	var counter = 0;
	while (counter < selectBox.options.length) {
	if (selectBox.options[counter].selected) {
	newBox.add(selectBox.options[counter]);
	continue;
	}
	counter++;
	}
	}

	function addAll() {
	var selectBox = document.getElementById('deselected');
	var newBox = document.getElementById('selected');

	while (selectBox.options.length > 0) {
	newBox.add(selectBox.options[0]);
	}
	}

	function removeAll() {
	var selectBox = document.getElementById('selected');
	var newBox = document.getElementById('deselected');

	while (selectBox.options.length > 0) {
	newBox.add(selectBox.options[0]);
	}
	}

	document.getElementById("add_all").addEventListener("click", addAll);
	document.getElementById("remove_all").addEventListener("click", removeAll);
	document.getElementById("add").addEventListener("click", add);
	document.getElementById("remove").addEventListener("click", remove);
	</script>
	</body>

	</html>