I need to put in each div, the value of the option I have chosen so that my list summarizes all the values I have chosen.
Here is my html code:
<select class="col-12 form-control addresses_book select2-hidden-accessible" data-target="points_1" placeholder="test test" data-select2-id="1" tabindex="-1" aria-hidden="true">
<option selected value="google_ChIJT-Wwjxhu5kcRp4HTdJvuK84" data-select2-id="20">Californie</option>
<option value="djbjdqs" data-select2-id="30">Texas</option>
</select>
<select class="col-12 form-control addresses_book select2-hidden-accessible" data-target="points_2" placeholder="test test" data-select2-id="2" tabindex="-1" aria-hidden="true">
<option value="google_ChIJT-Wwjxhu5kcRp4HTdJvuK84" data-select2-id="20">Californie</option>
<option selected value="pQZDJO" data-select2-id="30">Texas</option>
</select>
<div id="#recapitulatif-page-new-quote_step">
</div>
And my jquery code:
let adress = $('.addresses_book');
for (let i = 1; i < adress.length + 1; i++) {
if (adress.find(':selected').data("data-select2-id", i).text() == i) {
$('#recapitulatif-page-new-quote_step').append(`
<h4>Adress n°${i}</h4>
<div id="sticky-step${i}>${adress.find(':selected').data("data-select2-id", i).text()}</div>
`);
}
console.log(adress.find(':selected').data("select2-id", i).text());
}
If you want to change it, here is the link: https://jsfiddle.net/Spyynox/pz2mf3yr/13/
In my console.log(), it shows me the 2 pasted values and not the separate values ... And also, it shows me 2 times the 2 values pasted (3 times if I have 3 options), therefore, it's not good. I would like it to show me a value per line so that each div only takes the value of the option it is designated.