<div>
    <table class="table">
        <thead>
            <?php
                function benefit()
                {
                    $output = '';
                    $be = App\Model\Hr\HrJobBenefitModel::where('status', 1)->get();

                    foreach($be as $row)
                    {
                        $output .= '<option value="'.$row->id.'">'.$row->name.'</option>';
                    }
                    return $output;
                }
            ?>
            <tr>
                <th>NO</th>
                <th>Name</th>
                <th>Amount</th>
                <th>  <a href="javascript:void(0)"  class="btn btn-xs btn-default r-add-benefit"><i class="fa fa-plus"></i> + </a> </th>
            </tr>
        </thead>
        <tbody class="tbody-benefit">
            @if(isset($store_select))
                @if(is_array($store_select))
                    @if(count($store_select)>0)
                        @foreach($store_select as $k => $r)
                            <tr>
                                <td class="r-no-benefit">1</td>
                                <td>
                                    {!! Form::select('benefit[]', $benefit, $r['benefit_id'], array('class' => 'form-control select2','required')) !!}
                                </td>
                                <td>
                                    <input class="form-control" value="{{$r['amount']}}" type="number" name="amount[]">
                                </td>
                                <td>
                                    <a href="javascript:void(0)"  class="btn btn-xs btn-default r-del-benefit"><i class="fa fa-trash"></i> - </a>
                                </td>
                            </tr>
                        @endforeach
                    @endif
                @endif
            @endif
        </tbody>
    </table>
</div>

@push('script')
    <script>
        $(function () {

            $('body').on('click', '.r-del-benefit', function (e) {
                e.preventDefault();
                $(this).parent().parent().remove();
            });

            $('body').on('click', '.r-add-benefit', function (e) {
                e.preventDefault();

                var tr = '<tr>\n' +
                    '                <td class="r-no-benefit">1</td>\n' +
                    '                <td>\n' +
                    '                    <select class="form-control benefit_type" name="benefit[]">\n' +
                    '                        <option value=""></option>\n' +
                    '                        <?php echo benefit(); ?></select>\n' +
                    '                </td>\n' +
                    '                <td>\n' +
                    '                    <input class="form-control" type="number" name="amount[]">\n' +
                    '                </td>\n' +
                    '                <td>\n' +
                    '                    <a href="javascript:void(0)"  class="btn btn-xs btn-default r-del-benefit"><i class="fa fa-trash"></i> - </a>\n' +
                    '                </td>\n' +
                    '      </tr>';

                $('.tbody-benefit').append(tr);

                updateNo();
            });
            $(document).on('change', '.benefit_type', function(){
                alert('hehehhe');
            });

            updateNo();

            @if(!isset($store_select))
                $('.r-add-benefit').trigger('click');
            @endif
        });

        function updateNo() {
            $('.r-no-benefit').each(function (i,item) {
                $(this).text(i+1);
            });
        }
    </script>
@endpush
