Necesito poner en cada div, el valor de la opción que elegí para que mi lista resuma todos los valores que elegí.

Aquí está mi código html:

 <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>

Y mi código jquery:

 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()); }

Si desea cambiarlo, aquí está el enlace: https://jsfiddle.net/Spyynox/pz2mf3yr/13/

En mi console.log(), me muestra los 2 valores pegados y no los valores separados... Y además, me muestra 2 veces los 2 valores pegados (3 veces si tengo 3 opciones), por lo tanto, no es bueno . Me gustaría que me mostrara un valor por línea para que cada div solo tome el valor de la opción designada.