How to pass array value to the function of javascript? PHP Laravel

Question

I have an array in the javascript named as country_id[] and selected_country[]. When the user select the country in country array, it will save inside the country_id[] array and when the user select the country inside the selected country, it will save inside the selected_country[] . Then, I want to pass the value of country_id[] and selected_country[] to the function at script function. This is to move the data from right to left and left to right. The picture is attached here.

But it says that, error below.

ERROR :

179:575 Uncaught ReferenceError: country_id is not defined

Form :

<form method="POST" action="{{route('admin-insurance-region-duplicateRegion')}}" onsubmit="return false;">
            @csrf
        <input name="id" value="{{$region->id}}" type="hidden" class="form-control" required>
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label>Choose Country</label>
                    <select class="form-control" name="country_id[]" multiple  size="10" style="height: 100%;">
                        @foreach ($countries as $item)
                        <option  value="{{$item->id}}" selected>{{$item->name}}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label>Selected Country</label>
                    <select class="form-control" name="selected_country[]" multiple  size="10" style="height: 100%;">
                        @foreach ($country_region as $item)
                            <option  value="{{$item->id}}" selected>{{$item->name}}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <button onclick="moveRight()">Move option to the right</button>
            <button onclick="moveLeft()">Move option to the Left</button>
        </div>

JAVASCRIPT :

<script>


        function moveRight() {

            var selItem = document.forms[0].country_id.selectedIndex;
            if (selItem == -1) {
                window.alert("You must first select an item on the left side.")
            } else {
                document.forms[0].selected_country.add(document.forms[0].country_id[selItem], null);
            }
        }

        function moveLeft() {
            var selItem = document.forms[0].selected_country.selectedIndex;
            if (selItem == -1) {
                window.alert("You must first select an item on the left side.")
            } else {
                document.forms[0].country_id.add(document.forms[0].selected_country[selItem], null);
            }
        }

</script>

Answer 1

Add Id attribute within 'country' and 'selected country' select box.

like.

<select class="form-control" id="country_id" name="country_id[]" multiple  size="10">
  -----
</select>

<select class="form-control" id="selected_country" name="selected_country[]" multiple  size="10">
 -----                
</select>

DEMO.

 <form method="POST" action="{{route('admin-insurance-region-duplicateRegion')}}" onsubmit="return false;"> <label>Choose Country</label> <select class="form-control" id="country_id" name="country_id[]" multiple size="10"> <option value="1" selected>1</option> <option value="2" selected>2</option> <option value="3" selected>3</option> </select> <label>Selected Country</label> <select class="form-control" id="selected_country" name="selected_country[]" multiple size="10"> <option value="s1" selected>s1</option> <option value="s2" selected>s2</option> <option value="s3" selected>s3</option> </select> </div> </div> <button onclick="moveRight()">Move option to the right</button> <button onclick="moveLeft()">Move option to the Left</button> </div> <script> function moveRight() { var selItem = document.forms[0].country_id.selectedIndex; if (selItem == -1) { window.alert("You must first select an item on the left side.") } else { document.forms[0].selected_country.add(document.forms[0].country_id[selItem], null); } } function moveLeft() { var selItem = document.forms[0].selected_country.selectedIndex; if (selItem == -1) { window.alert("You must first select an item on the left side.") } else { document.forms[0].country_id.add(document.forms[0].selected_country[selItem], null); } } </script>