Checkbox values fetching using Jquery

I have multiple checkboxes. The users can select either one or more than one. So, I have to get the values of those checked boxes.

 <div class="filters col-md-12">
                        <div class="form-group">
                            @foreach($destination as $dest)
                            <label class="radio-inline" id="desti">
                                <input  type="checkbox" name="dest_val" value="">
                                <span class="checkmark"></span>
                            </label>
                            @endforeach
                        </div>
                    </div>

By the way I am using Laravel.So, in the Jquery, I am writing this:

   $(document).on('click','#desti',function () {

           var destination = $("input[name='dest_val']:checked").val()
               console.log(destination);


       });

But, it is not giving me the correct values. When I click on first checkbox it gives value = 1, which is correct and when I click on 2 it gives 2 which is correct. So, when 1 is checked and I check 2 then, I am getting two one's added to the previous 1, which makes 1(3)/ 1 times 3 and I also get 1 two. So, what I want is when I check 2 I get only 2 and not anymore ones.

This kind of thing is happening in vice-versa too. Can anyone help?