How to get multiple value from checkbox Table after selecting it and remove the value if check box is deselected using jquery

blade.file

<table class="table table-borderless">
    <thead>
        <tr>
            <th> </th>
            <th> Name </th>
            <th> ph </th>
            <th> email </th>
            <th> reg no </th>
        </tr>
    </thead>

    @foreach ($studentlist as $list)
        <tr>
            <td>

                <div class="checkbox p-0 mr-0">

                    <input type="checkbox" value="{{ $taxList->studentid }}" name="checkbox[]"
                        id="checkbox-in-{{ $list->studentid }}" class="multi-select-tax">

                    <label for="checkbox-in-{{ $taxList->studentid }}" class="cr PRAV01-checkbox"></label>

                </div>

            </td>
            <td> {{ $taxList->studenName }} </td>
            <td> {{ $taxList->studentphnuumber }} </td>
            <td> {{ $taxList->email }} </td>
            <td> {{ $taxList->Regno }} </td>
        </tr>
    @endforeach
 </tbody>
</table>
    <label>Students</label>
    <input type="text" class="form-control" multiple="multiple" id='student-id' name="student">
    <button class="btn btn-primary ">Add</button>

There are 5 five students.

If I select 2nd and 3rd student with checkbox select (multi select).the selected student id should store in input field(id=student-id) as 2,3

If I unselect means value should removed.

How I can do this method with help of Jquery or JavaScript.

I tried 2 method but I didn’t get ?

Answer

https://codepen.io/medilies/pen/abVGpzL

    <label for="checkbox1"> 1 </label>
    <input type="checkbox" name="checkbox1" id="1"> <br>
    <label for="checkbox2"> 2 </label>
    <input type="checkbox" name="checkbox2" id="2"> <br>
    <label for="checkbox3"> 3 </label>
    <input type="checkbox" name="checkbox3" id="3"> <br>
    <label for="checkbox4"> 4 </label>
    <input type="checkbox" name="checkbox4" id="4"> <br>
    <label for="checkbox5"> 5 </label>
    <input type="checkbox" name="checkbox5" id="5"> <br>

    <label>Students</label>
    <input type="text" class="form-control" multiple="multiple" id='student-id' name="student">

const multiInput = document.querySelector("#student-id");
const checkboxes = document.querySelectorAll("input[type=checkbox]");

checkboxes.forEach((checkbox) => {
    checkbox.addEventListener("change", (e) => {
        const currentCheckbox = e.target;

        let currentMulti;
        if (multiInput.value === "") {
            currentMulti = [];
        } else {
            currentMulti = multiInput.value.split(",");
        }

        if (currentCheckbox.checked) {
            currentMulti.push(currentCheckbox.id);
            multiInput.value = currentMulti.join(",");
        } else {
            multiInput.value = currentMulti
                .filter((value) => {
                    return value !== currentCheckbox.id;
                })
                .join(",");
        }
    });
});

Note that your HTML have some errors like not including the </table> closing tag