how to make a boucle of calculation in Js with many output?-CodePudding

i make a payroll system with laravel and js , i can fetch the table of payroll like that : payroll table

with like view :

<div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-header with-border">
                    <a href="" data-toggle="modal" name="generate" class="btn btn-primary" onClick="generate()"><i class="fa fa-plus"></i> Generate</a>
                </div>
                <div class="box-header with-border">
                    <form action="{{url('/search')}}" method="get">
                        {{csrf_field()}}
                        <input type="search" name="name" class="form-control"/>
                        <button type="submit" class="btn btn-primary">Search</button>



                    </form>


                </div>
                <div class="box-body">
                    <table id="example1" class="table table-bordered">
                        <thead>
                        <th>Employee ID</th>

                        <th>Full Name</th>
                        <th>Salary</th>
                        <th>EDW</th>
                        <th>TDW</th>
                        <th>Deduction</th>
                        <th>Net Pay</th>

                        </thead>
                        <tbody>

                            @foreach( $employees as $employee)
                       
                            <tr>
                                <td>{{$employee->id}}</td>

                                <td>{{$employee->firstname}} {{$employee->lastname}}</td>
                                <td><input type="number" id="salary" value="{{$employee->salary}}" name="salary"></td>


                                <td><input type="number" id="edw" value="30" name="edw"></td>
                                <td><input type="number" id="tdw" value="30" name="tdw"></td>
                                <td><input type="number" id="deduction" value="0" name="deduction"></td>
                                <td><span id="result"></span> AED</td>

                            </tr>

                            @endforeach





                            <tr>



                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection

i make a calculation with js :

function generate()
   {
    salary = document.getElementById("salary").value;
    edw = document.getElementById("edw").value;
    tdw = document.getElementById("tdw").value;
    deduction = document.getElementById("deduction").value;
    document.getElementById("result").innerHTML = salary / edw * tdw - deduction;
    }

but the problem that the function can calculate just the payroll of the first row : calculation payroll

so guys how can i calculate all the rows by clicking one time on the button ?

CodePudding user response：

First of all use class instead of id where id="salary" or others. Then can use the calculation as follow:

function generate() {
    $('#example1 > tbody  > tr').each(function(){
        var salary = $(this).find('.salary').val();
        var edw = $(this).find('.edw').val();
        var tdw = $(this).find('.tdw').val();
        var deduction = $(this).find('.deduction').val();

        var total = salary / edw * tdw - deduction;
        $(this).find('.result').text(total);
    });
}