The checkbox next to the text does not get enabled on click, it's always the first one

The stackblitz is not working properly but one thing you can try is making the id of the checkboxes unique like component-

public routes=[{"id":1, "place":"Chennai - 500085/Madhapur, TS"}, {"id":2, 
"place":"chennai-mumbai"}, {"id":3, "place":"chennai-madhapur"}, {"id":4, 
"place":"chennai-secundrabad"}];

html-

<div class="col-sm-1" style="margin-top: 10px;">
                    <mat-checkbox class="check-style" id="route.id"></mat-checkbox>
                </div>
                <div class="col-sm-10">
                    <div class="routesList">
                        {{route.place}}
                    </div>
                </div>

I hope it helps.