Listbox move items

I have the below listbox that transfer values to other listbox, is working fine but I want to take the values in split show I can use json

html

<?php 

div class="subject-info-box-1">
                    <select name="product_list"  multiple = "multiple"size="20" id="lstBox1" style="width: 250px;" class ="form-control" >
                      @foreach($array['product_name'] as  $product_name['product_name'])
                        @foreach($array['product_directions'] as  $product_directions['product_directions'])

                          <?php $i++ ?>
                          <option  value="{{$product_name['product_name']}}, {{$product_directions['product_directions']}}" style="font-weight:bold" > {{ $i}} ) {{$product_name['product_name']}} {{$product_directions['product_directions']}} </option>
                          @endforeach
                      @endforeach
              </select> </td>
              
            </div>

          <td>    <div class="subject-info-arrows text-center">
                <input type="button" id="btnRight" value=">" class="btn btn-default" /><br />
                <input type="button" id="btnLeft" value="<" class="btn btn-default" /><br />
                <input type="button" id="btnAllRight" value=">>" class="btn btn-default" /><br />
                <input type="button" id="btnAllLeft" value="<<" class="btn btn-default" />
              </div> </td>

            <td>  <div class="subject-info-box-2">
                <select autofocus name = "pending_products[]" multiple="multiple" size="20" id='lstBox2' style="width: 250px;" class="form-control">
                </select> </td>




          <center><button type="submit" id='submit' class="btn btn-success" style="margin-left:38px" >Pending Products</button></center>

javascript

<?php 

<script type="text/javascript">
$('#submit').click(function() {
    $('#lstBox2 option').prop('selected', true);
});
(function () {
    $('#btnRight').click(function (e) {
        var selectedOpts = $('#lstBox1 option:selected');
        if (selectedOpts.length == 0) {
            alert("Nothing to move.");
            e.preventDefault();
        }
        $('#lstBox2').append($(selectedOpts).clone());
        $(selectedOpts).remove();
        e.preventDefault();
    });
    $('#btnAllRight').click(function (e) {
        var selectedOpts = $('#lstBox1 option');
        if (selectedOpts.length == 0) {
            alert("Nothing to move.");
            e.preventDefault();
        }
        var retVal = confirm("Do you want to transfer all products to PENDING list ?");
        if( retVal == true ){
        $('#lstBox2').append($(selectedOpts).clone());
        $(selectedOpts).remove();
        e.preventDefault();
      }
    });
    $('#btnLeft').click(function (e) {
        var selectedOpts = $('#lstBox2 option:selected');
        if (selectedOpts.length == 0) {
            alert("Nothing to move.");
            e.preventDefault();
        }
        $('#lstBox1').append($(selectedOpts).clone());
        $(selectedOpts).remove();
        e.preventDefault();
    });
    $('#btnAllLeft').click(function (e) {
        var selectedOpts = $('#lstBox2 option');
        if (selectedOpts.length == 0) {
            alert("Nothing to move.");
            e.preventDefault();
        }
        $('#lstBox1').append($(selectedOpts).clone());
        $(selectedOpts).remove();
        e.preventDefault();
    });


}(jQuery));

Now I get the below

<?php 
array:2 [▼
  "_token" => "RgqpyEVz8ji659bZguBup3fW0YiC0vcRtk186AM2"
  "pending_products" => array:1 [▼
    0 => "CD Player, Electronics"
  ]
]

But I want to get it like this:

<?php 
array:2 [▼
  "product_name" => array:1 [▼
    0 => "CD Player"
  ]
  "product_directions" => array:1 [▼
    0 => "Electronics"
  ]
]