JSFiddle - React, Tailwind, and code Playground

HTML

<select id="respOptions" multiple>
<option value="x" id="idx">X</option>
<option value="y" id="idy">Y</option>
</select>

<a href="#" id="show">Show JSON</a>

<div class="output" id="byID"></div>
<div class="output" id="byval"></div>

CSS

div.output {
    height: 100px;
    margin-top: 30px;
    border: 1px solid red;
}

JavaScript

var respList = [{
    'respID': 'aaa',
    'respName': 'Aaaa'},
{
    'respID': 'bbb',
    'respName': 'Bbbb'},
{
    'respID': 'ccc',
    'respName': 'Cccc'},
{
    'respID': 'ddd',
    'respName': 'Dddd'}];
var respOptionsSelect = document.getElementById('respOptions');
var searchOptions = null;
for (var i = 0; i < respList.length; i++) {
    var resp = respList[i];
    selectOptions = document.createElement('option');
    selectOptions.value = resp.respID;
    selectOptions.innerHTML = resp.respName;
    selectOptions.id = 'id' + i;
    respOptionsSelect.appendChild(selectOptions);
};

$('#show').click(function() {
    var x = JSON.stringify($('#respOptions').val());
    $('#byval').html(x);

    var y = $('#respOptions option:selected').map( function(i,el){
        var result = {};
        result[ el.id ] = $(el).val();
        return result;
    }).get();
    y = JSON.stringify(y);
    $('#byID').html(y);

});