Make sure to include following js files at end of body element

                                                    <script src="assets/vendor/jquery.rateit/scripts/jquery.rateit.min.js"></script>
                                                

                                                    <div class="rateit" data-rateit-mode="font">
</div>
                                                

                                                    <div class="rateit"  data-rateit-icon="@" data-rateit-mode="font">
</div>
                                                

                                                    <select id="backing3b">
    <option value="0">Bad</option>
    <option value="1" selected="selected">OK</option>
    <option value="2">Good</option>
    <option value="3">Great</option>
    <option value="4">Excellent</option>
</select>
<div class="rateit rateit-mdi" data-rateit-backingfld="#backing3b" data-rateit-mode="font" data-rateit-icon="󰓒"></div>
                                                

Make sure to include following js files at end of body element

                                                    <!-- Plgins only -->
<script src="assets/vendor/jquery.rateit/scripts/jquery.rateit.min.js"></script>
<script src="assets/js/ui/component.rating.js"></script>
                                                

                                                    <div class="rateit rateit-mdi" id="js-interaction" data-rateit-min="2" data-rateit-mode="font" data-rateit-icon="󰓒">
</div>
<div>
    <span id="jsvalue"></span>
    <span id="jshover"></span>
</div>
                                                

                                                    <div style="direction: rtl">
    <div class="rateit rateit-mdi" data-rateit-mode="font" data-rateit-icon="󰓒">
    </div>
</div>
                                                

                                                    <!-- Star -->
<div class="rateit rateit-mdi" data-rateit-mode="font" data-rateit-icon="󰓒">
</div>

<!-- Heart -->
<div class="rateit rateit-mdi mt-3" data-rateit-mode="font" data-rateit-icon="󰋕">
</div>
                                                

                                                    <div class="rateit rateit-mdi" data-rateit-mode="font" data-rateit-icon="󰓒" style="font-size: 36px;">
</div>
                                                

                                                    <div class="rateit rateit-mdi" data-rateit-mode="font" data-rateit-icon="󰓒"  data-rateit-value="2.5" data-rateit-ispreset="true" data-rateit-readonly="true">
</div>
                                                

                                                    <div class="rateit rateit-mdi" data-rateit-mode="font" data-rateit-icon="󰓒" id="getting-values">
</div> 

<!-- Onclick events -->     
<button class="btn btn-sm btn-primary" onclick="alert($('#getting-values').rateit('value'))">Get value</button>
<button class="btn btn-sm btn-primary" onclick="$('#getting-values').rateit('value', prompt('Input numerical value'))">Set value</button>
<button class="btn btn-sm btn-primary" onclick="alert($('#getting-values').rateit('max'))">Get max value</button>
<button class="btn btn-sm btn-primary" onclick="$('#getting-values').rateit('max', prompt('Input numerical value'))">Set max value</button>
<button class="btn btn-sm btn-primary" onclick="alert($('#getting-values').rateit('step'))">Get step size</button>
<button class="btn btn-sm btn-primary" onclick="$('#getting-values').rateit('step', prompt('Input numerical value'))">Set step size</button>
<button class="btn btn-sm btn-primary" onclick="alert($('#getting-values').rateit('readonly'))">Get readonly value</button>
<button class="btn btn-sm btn-primary" onclick="$('#getting-values').rateit('readonly',!$('#getting-values').rateit('readonly'))">Toggle readonly</button>
<button class="btn btn-sm btn-primary" onclick="alert($('#getting-values').rateit('ispreset'))">Get ispreset value</button>
<button class="btn btn-sm btn-primary" onclick="$('#getting-values').rateit('ispreset',!$('#getting-values').rateit('ispreset'))">Toggle ispreset</button>
<button class="btn btn-sm btn-primary" onclick="$('#getting-values').rateit('reset')">Reset</button>