Как вывести два поля input при определенном option в select в определенном элементе?

Question

[ekachu]

Доброго времени суток, я супер-новичок в laravel и еще больше в js, поэтому сталкиваюсь с проблемой:
У меня есть вывод заявок на обратный звонок, у них есть статус ("Новая", "Звонок успешно состоялся" и "Звонок состоялся, но"). Мне нужно, чтобы при выборе из селекта каждого варианта кроме "Новая" появлялось 3 инпута: коммент, датаВремя и submit. Проблема заключается в том, что у меня на странице много заявок и если я хочу поменять статус НЕ у первостоящей заявки, эти инпуты конечно появляются, но не у той заявки, у которой изменился селект, а у первостоящей. А нужно чтобы инпуты появлялись в том месте, где изменен селект.

blade файл:

@foreach($callbacks as $callback)
            {{ $callback->id }}
            {{ $callback->name }}
            <form action="" method="post">
                @csrf
                @method('put')
                <select name="status" id="status" onchange="Rejected(this)">
                    @foreach(StatusEnum::cases() as $status)
                         <option @if($status->value == StatusEnum::NEW->value)
                                            selected
                                      @endif
                            value="{{ $status->value }}">{{ $status->value }}</option>
                     @endforeach
                </select>
                <div id="ifCall"></div>
            </form>
@endforeach

js файл:

let select = document.querySelectorAll('#status');
const comment = document.createElement('input');
const dateTime = document.createElement('input');
const submit = document.createElement('input');
const ifCall = document.getElementById('ifCall');
function Rejected(select) {
    if (select.value != 'Новая') {
        comment.setAttribute('type', 'text');
        comment.setAttribute('name', 'comment');
        comment.setAttribute('placeholder', '*Комментарий');
        comment.required = true;
        comment.style.width = '300px';

        dateTime.setAttribute('type', 'datetime-local');
        dateTime.setAttribute('name', 'dateTime');
        dateTime.required = true;
        dateTime.style.width = '150px';

        submit.setAttribute('type', 'submit');
        submit.setAttribute('value', 'Обновить');
        submit.style.width = '150px';

        ifCall.appendChild(comment);
        ifCall.appendChild(dateTime);
        ifCall.appendChild(submit);
    }
    else {
        comment.setAttribute('type', 'hidden');
        comment.required = false;

        dateTime.setAttribute('type', 'hidden');
        dateTime.required = false;

        submit.setAttribute('type', 'hidden');
        submit.required = false;
    }
}

Прошу помогите, вся надежда на вас...

Comments

[Виктор]

if (select.value != 'Новая') {

это условие не работает?

посмотрите какой на самом деле value

function Rejected(select) {
    console.log(select.value);

[WitER]

ekachu , вы для всех форм создаете div-елемент с id = "ifCall", в модели DOM это так не работает, атрибут id не допускает повторения. Вам стоит либо получать нужный div как соседа(\дочерний элемент формы) от select-а внутри функции, либо генерировать для каждого блока под динамические элементы уникальный id и передавать его в функцию вторым параметром.

[ekachu]

WitER, спасибо за ответ! Я добавила в функцию в if две строчки:

const form = select.parentNode;
const ifCall = form.lastElementChild;

И у меня стали появляться инпуты в тех местах, в которых надо, но всплыла другая проблема, тоже связанная с js, поэтому лучше я реализую этот модуль немного по-другому в силу того, что моего уровня понимания js слишком недостаточно, чтобы понять, как это решить, слишком уж глобальная проблема для моего восприятия.
Но огромное спасибо за вашу помощь! Мои знания хоть немного, но увеличились

Answer 1

[Александр]

У вас в шаблонизаторе создаётся много html-элементов с одинаковыми id, а это плохо - что и видно как раз на примере вашего обработчика.
Соответственно, вызов :

const ifCall = document.getElementById('ifCall')

Возвращает первый найденный div#ifCall.
Можно добавлять в атрибут id внутри цикла - текущий индекс цикла: ifCall_1.
А для упрощения связывания элементов в одной «группе» - указывать индекс в атрибуте dataSet:

<select id =“status_1” data-group-id=“1”>…</select>
<div id =“ifCall_1” class=“if-call” data-group-id=“1”>…</div>

У всех ifCall теперь один css-класс - это и правильно, и хорошо.

В js коде извлечь индекс группы можно в поле dataSet элемента:

const groupId = select.dataSet.groupId

Соответственно, искать элемент

querySelector(‘.if-call[data-group-id=${groupId}]’)