How to get all the list box options on Hidden fiel

I Have a two listbox, left listbox contains values and right listbox doesn't have anything while compiling.

<div class="row" style="padding-top:10px;">
     <div class="col-lg-3">
          <asp:ListBox ID="lstLeft" class="form-control" runat="server" SelectionMode="Multiple" Height="220px">
              <asp:ListItem Value="transactions.storeid as StoreID">StoreID</asp:ListItem>
              <asp:ListItem Value="YEAR(transactions.Time) Year">Year</asp:ListItem>
              <asp:ListItem Value="MONTH(transactions.Time) Month">Month</asp:ListItem>
              <asp:ListItem Value="transactionsEntry.TransactionNumber">TransactionNumber</asp:ListItem>
              <asp:ListItem Value="transactionsEntry.Quantity">Quantity</asp:ListItem>
              <asp:ListItem Value="items.ItemLookupCode">ItemLookupCode</asp:ListItem>
              <asp:ListItem Value="CONVERT(varchar, CAST(transactionsEntry.Price AS money), 1)*transactionsEntry.Quantity ExtendedPrice">ExtendedPrice</asp:ListItem>
              <asp:ListItem Value="departments.Name as DepartmentName">DepartmentName</asp:ListItem>
              <asp:ListItem Value="categories.Name as CategoryName">CategoryName</asp:ListItem>
              <asp:ListItem Value="items.SubDescription1">SubDescription1</asp:ListItem>
              <asp:ListItem Value="suppliers.SupplierName">SupplierName</asp:ListItem>
              <asp:ListItem Value="suppliers.Code">Code</asp:ListItem>
          </asp:ListBox>
     </div>
     <div class="col-lg-1">
          <input type="button" id="left" value="<<" />
          <input type="button" id="right" value=">>" />
     </div>
     <div class="col-lg-3">
          <asp:ListBox ID="FirstRight" runat="server" SelectionMode="Multiple" Width="100%" Height="220"></asp:ListBox>
          <asp:HiddenField ID="HiddentxtSelectedColumn" runat="server" />
     </div>
 </div>

When user select the list items from left listbox and click the right button, the items which is selected from left list box it will move to right to listbox. Jquery code:

$(function () {

       $("#left").bind("click", function () {
            var options = $("[id*=FirstRight] option:selected");
            for (var i = 0; i < options.length; i++) {
               var opt = $(options[i]).clone();
               $(options[i]).remove();
               $("[id*=lstLeft]").append(opt);
            }
        });

        $("#right").bind("click", function () {
            var options = $("[id*=lstLeft] option:selected");

            for (var i = 0; i < options.length; i++) {
                var opt = $(options[i]).clone();

                $(options[i]).remove();
                $("[id*=FirstRight]").append(opt);
            }
      });

Upto this working fine.

I have a hidden field HiddentxtSelectedColumn, When user click right button,it has to get all the list box values and seperated by comma.

I tried this code

var hiddenTextField = '';
$('#right').click(function () {
    alert("Hidden Field = " + hiddenTextField.length);
    $('#FirstRight option').each(function () {
         if (hiddenTextField.length > 0) {
              hiddenTextField = hiddenTextField + "," + $(this).val();
         }
         else {
              hiddenTextField = $(this).val();
              alert("else This =" + $(this).val());
         }
    });
    alert("Hidden Field = " + hiddenTextField);
});

I just created Hidden field variable called hiddenTextField, once I get my result, I plan to move to hidden field. But it doesn't work properly.

When I click the button at first time, alert box " Hidden Field = " empty. But it has to show the some value which is moved. When I click the second time, it shows the previous one which is moved, and it doesn't show the second one. And third time it's showing showing all the values and by repeating several times the first value Thaks

This is your answer

$('#right').click(function () {
           var options = $("[id*=lstLeft] option:selected");

            for (var i = 0; i < options.length; i++) {
                var opt = $(options[i]).clone();

                $(options[i]).remove();
                $("[id*=FirstRight]").append(opt);
            }

            var hiddenTextField = '';
            //alert("Hidden Field = " + hiddenTextField.length);
            $('#FirstRight option').each(function () {
                if (hiddenTextField.length > 0) {
                    hiddenTextField = hiddenTextField + "," + $(this).val();
                    alert("If calling");
                    //alert("This =" + $(this).val());
                }
                else {
                    hiddenTextField = $(this).val();
                    alert("else calling");
                    //alert("else This =" + $(this).val());
                }
            });
            //alert("Hidden Field = " + hiddenTextField);
            $('#HiddentxtSelectedColumn').val(hiddenTextField);
            alert($('#HiddentxtSelectedColumn').val());
        });

This will work definitely