Passing Javascript/Jquery ARRAY to JSF 2 to bild a lit box

Question

Trying to pass an array created in Javascript/Jquery to a jsf 2... so I can build my list box... not sure how to pass the parameter. I've got this javascripts: My array is alarmsTableSelectedItems that I want to pass to my jsf 2

alarmsTableSelectedItems.length = 0;
$('#flowtable tbody tr').each(function() {
    alarmsTableSelectedItems.push($(this).attr("id"));
});
$(':checkbox').prop('checked', true);
var ListAlarms = alarmsTableSelectedItems.toString();
var ListAlarms2 =alarmsTableSelectedItems;
console.log("ListAlarms :"+ListAlarms);
console.log("array sort: "+ ListAlarms2.sort());
console.log("array2 sort: "+ alarmsTableSelectedItems.sort());
$("#listMIK").val(alarmsTableSelectedItems);

All in the same file, trying to pass my array(alarmsTableSelectedItems) first so I could build a listBOX... what approach is recommended or is the best practice for this?

<div id="queryDialog">
    <div> 
        <h:selectOneListbox value="#{selectedAlarmsIdsField2}"> 
            <f:selectItems value="1" var="y" itemLabel="itemLabel number 1" itemValue="itemValue 1" /> 
        </h:selectOneListbox> 
    </div> 
        
        
        <div >
            <h:outputLabel style="padding-bottom:5px; font-weight: bold;">Alarms Number:</h:outputLabel>
            <textarea readonly="readonly" cols="15" rows="1" id="listMIK"></textarea>
        </div>
        <div >
            <h:outputLabel style="padding-bottom:5px; font-weight: bold;">Alarms Number:</h:outputLabel>
            <textarea readonly="readonly" cols="15" rows="1" >${"alarmsTableSelectedItems"}</textarea>
        </div>

        <div >selectedAlarmsIdsField2
            <h:outputLabel style="padding-bottom:5px; font-weight: bold;">Alarms Number2:</h:outputLabel>
            <h:outputLabel>${"alarmsTableSelectedItems"}</h:outputLabel>
        </div>

Only this one render data:

<div>
    <h:outputLabel style="padding-bottom:5px; font-weight: bold;">Alarms Number:</h:outputLabel>
    <textarea readonly="readonly" cols="15" rows="1" id="listMIK"></textarea>
</div>

Any recommendation on how and what's best practice?