<table id="example2" class="table table-striped table-bordered dt-responsive nowrap" style="width:100%">
    <thead>
        <tr>
            <th>#</th>
            <th>Procedure Name</th>
            <!-- <th>Fees</th> -->
        </tr>
    </thead>
    <tbody>
    @foreach($data2 as $result2)
        <tr>
            <td>
                <input type="checkbox" name="ProcedureChk[]" value="{{$result2->id}}"
                    class="common_selector Proccedures" checked>
            </td>
            <input type="hidden" name="ProcId[]" value="{{$result2->id}}">
            <td>{{$result2->Name}}</td>

            <!-- <td>&#8377;{{number_format($result2->Amount,2)}}</td> -->
        </tr>
        @endforeach
        @foreach($data as $result)
        <tr>
            <td>
                <input type="checkbox" name="ProcedureChk[]" value="{{$result->id}}"
                    class="common_selector Proccedures">
            </td>
            <input type="hidden" name="ProcId[]" value="{{$result->id}}">
            <td>{{$result->Name}}</td>

            <!-- <td>&#8377;{{number_format($result->Amount,2)}}</td> -->
        </tr>
        @endforeach
       
    </tbody>
</table>
<input type="hidden" id="ProcId" name="ProcedureId[]" value="{{$Procedures}}">
<script type="text/javascript">
$(document).ready(function() {
    $('#example2').DataTable({
        responsive: true,
        "pageLength": 1000
    });
    function get_filter(class_name)
    {
        var filter = [];
        $('.'+class_name+':checked').each(function(){
            filter.push($(this).val());
        });
        return filter;
    }

    $('.common_selector').click(function(){
        //filter_data();
        var ProccedureId = get_filter('Proccedures');
         if(ProccedureId == ''){
              $('#ProcId').val(0);
         }
         else{
        $('#ProcId').val(ProccedureId);
         }
        
    });
});
</script>