Как сделать правильный вывод генерируемых блоков при генерации option в JS?

Question

[Vlad Avtomat]

Я в свой блок генерирую циклом блоки

for (let i = 0; data[i] != null; i++) {
            $('.partner-status-name-select').append($("<option></option>", {class: data[i]['name'], text: data[i]['name'] , value: data[i]['name']})); 
}

И в этом же цикле генерирую скрытые блоки которые мне надо выводить при нажатии на option

$('.partner-status-name-box').append("<p class='" + data[i]['name'] + "inner" +"' style='display: none;'>" + data[i]['name'] +  "</p>")

Мне нужно при клике на генерируемый блок выводить другие блоки,
в которых будут содержатся значения из нашего массива data.

Помогите реализовать.
Не могу понять как написать примерно такой код.

$('.partner-status-name-select').on('click', function () {
            for (let i = 0; data[i] != null; i++) {
                let period = $(this).attr("value");
                if (period == data[i]['name']) {
                    $(this).slideUp();
                    $('.'+data[i]['name']).slideDown();
                } 
        });

Только чтоб в this попадал тот блок на который мы нажали, а все остальные блоки скрывали свое содержимое.

Answer 1

[Stalker_RED]

Половину кода пришлось выбросить

$('.sel').html(data.map(d=>`<option value="${d.name}">${d.name}</option>`))
$('.box').html(data.map(d=>`<p class="${d.name}">${d.name}</p>`))

$('.sel').on('change', function() {
  $('.box .'+this.value).slideDown().siblings().hide()
})

https://jsfiddle.net/ok834qLs/