Javascript - get text instead of values from multiple select boxes

Question

I´ve a form where user can add as much dropdowns as he needs. I need to save the text from the selected options from the dropdowns to the session.

HTML:

<select name="codes[]" class="form-control-edited coinsurers-sv d-inline-block" placeholder="Please select">
    <option value="">Please select</option>
    <option value="1">Test 1</option>
    <option value="2">Test 2</option>
    <option value="3">Test 3</option>
</select>

Javascript:

<script>
let coInsuredPersonsSV = $('.coinsurers-sv').map(function (){ return $('.coinsurers-sv').find("option:selected").text() }).toArray();
sessionStorage.removeItem('co-insured-persons-hi-sv');

if (coInsuredPersonsSV.length > 0) {
sessionStorage.setItem('co-insured-persons-hi-sv', JSON.stringify(coInsuredPersonsSV));
}
</script>

Now lets say a user needs 3 dropdown forms and selects on every dropdown field another option.

Dropdown 1: Test 1
Dropdown 2: Test 2
Dropdown 3: Test 3

the result at my session storage is:

["Test 1   Test 2   Test 3", "Test 1   Test 2   Test 3", "Test 1   Test 2   Test 3"]

But the result should be:

["Test 1", "Test 2", "Test 3"]

Can someone help me on how I need to change the .find function so that I get my desired results?

Answer 1

In the map callback function you select all dropdown lists, instead of the iterated one. So replace this code:

return $('.coinsurers-sv').find

...with:

return $(this).find