Materialize.css selectbox rendering duplicate select boxes - css

Question

I am using Materialize.css library (v 1.0.0), as of 2018 for my project to add the material components. However, I failed to initialize two select boxes with it.
I have two select boxes in my page.
$(function() {
$("#numPagesPaginate").formSelect();
$("#numRatingsEdit").formSelect();
});
<select id="numPagesPaginate" name="numPagesPaginate" data-ng-model="bkCtrl.page.pageSize">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="numRatingsEdit" name="numRatingsEdit" style="display:none">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
However, when I initialize both the select boxes using this only the first one works.
In addition, if I initialize the second selectbox in the script tag elsewhere, the box gets initialized and works, but there is one duplicate selectbox.
Edited: To add this question, I want to tell you that I have read the documentation and the default method. However, no results.

Answer 1

You should follow documentation and initialize globally with one line:
$('select').formSelect();

Answer 2

Just like Serg said, you should follow the documentation properly.
<div class="container">
<div class="row">
<div class="col s6">
<label>Num Pages Paginate</label>
<select id="numPagesPaginate" name="numPagesPaginate" data-ng-model="bkCtrl.page.pageSize">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div class="col s6">
<label>Num Ratings Edit</label>
<select id="numRatingsEdit" name="numRatingsEdit">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('select').formSelect();
});
</script>