Javascript function works only on the first table row inside my foreach laravel loop-CodePudding

I am using a javascript functions to input a number and automatically display the result after calculation inside a boostrap modal.

If click the request button at the first row, javascript functions work well. But when I click on the request button on the second row and succeeding rows, it doesn't function.

I am not really sure if the problem is the data inside the modal or the data outside the modal

I tried to getElementsByClassName instead of ID but it still not working.

<script>
    function mult(value) { // === calculate the profit and the total amount due === //
        var x = value * 15 / 100;
        var y = parseFloat(x) parseInt(value);

        document.getElementById("profit").value = x;
        document.getElementById("total").value = y;
    }
</script>

<table id="table1">
    <thead>
    <tr>
        <th>#</th>
        <th>Full Name</th>
        <th>Requests</th>
    </tr>
    </thead>
    <tbody>
    @foreach($Clients as $Client)
        <tr id="foreach-row">
            <td>{{ $Client->full_name }}</td>
            <td>
                <div class="buttons">
                    <a class="btn icon btn-secondary" data-toggle="modal"
                       data-target="#LoanRequestModel-{{ $Client->id }}">
                        Request
                    </a>
                </div>
            </td>
        </tr>
        {{-- =========== MODEL - NEW REQUEST  ===============--}}
        <div class="modal" id="LoanRequestModel-{{ $Client->id }}" tabindex="-1" role="dialog"
             aria-labelledby="exampleModalLongTitle" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title"><b>REQUEST</b></h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <i data-feather="x"></i>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form action="{{ route('finance.storeRequest', $Client->id) }}" method="post"
                              class="loanrequest_form" enctype="multipart/form-data">
                            {{ csrf_field() }}

                            <label>Full name</label>
                            <div class="form-group">
                                <input type="text" name="creditor_full_name"
                                       class="form-control" value="{{ $Client->full_name }}" >
                            </div>
                            <div>
                                <label>Amount</label>
                                <div class="form-group">
                                    <input  type="number" name="loan_amount"
                                            class="form-control" onkeyup="mult(this.value);" >
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-5">
                                    <label>Interest Rate</label>
                                    <div class="input-group mb-3">
                                        <label class="input-group-text" for="inputGroupSelect01">Choose</label>
                                        <select class="form-select rate"name="interest_rate" >
                                            <option value="15" selected>15%</option>
                                            <option value="20">20%</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-7">
                                    <label>Profit</label>
                                    <div class="input-group mb-3">
                                        <input type="text" id="profit" class="form-control" name="profit"
                                               aria-label="Amount">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <label>Total Amount due</label>
                                <div class="input-group mb-3">
                                    <input type="text" id="total" class="form-control" name="amount_due"
                                           aria-label="Amount">
                                </div>
                                <div class="modal-footer">
                                    <button type="submit" class="btn btn-outline-secondary ml-1" >
                                        <i class="bx bx-check d-block d-sm-none"></i>
                                        <span class="d-none d-sm-block">Submit</span>
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    @endforeach
    </tbody>
</table>

CodePudding user response：

The problem - as others have said above - is that whilst you are making the ID of each modal unique using :

id="LoanRequestModel-{{ $Client->id }}"

within your loop, when generating each modal, you are using fields which have non-unique IDs :

type="text" id="profit" 
type="text" id="total"

What you would be better off is making those IDs non-unique, in the same way that you did with the modal ID :

type="text" id="profit-{{ $Client->id }}"
type="text" id="total-{{ $Client->id }}"

and add IDs to the fields which you will need to use in your script that does not presently have one :

type="number" id="loan_amount-{{ $Client->id}}" name="loan_amount"

Then, when you trigger the javascript on keyup here :

onkeyup="mult(this.value);"

rather than pass the value of the field, pass the client ID :

onkeyup="mult({{ $Client->id);"

Then you just need to adjust your javascript (because it's no longer being passed the loan_amount) so that it first gets the loan_amount, then the other bits and pieces it needs, and finally returns them to the right place :

<script>
    function mult(id) { // === this is now receiving the ID, not a value so first we need to get the value for the relevant field *emphasized text*== //
        var value = document.getElementById("loan_amount-"   id).value
        var x = value * 15 / 100;
        var y = parseFloat(x) parseInt(value);
        document.getElementById("profit"   id).value = x;
        document.getElementById("total"   id).value = y;
    }
</script>