JSFiddle - React, Tailwind, and code Playground

by samonela

HTML

<div class="container-fluid rating">
                <div class="row">
                    <h2>Product Rating</h2>
                    <!-- stars -->
                    <span class="stars" id="my_stars" onclick="increaseNumber()">
                     
                        <i class="fa fa-star-o" aria-hidden="true"></i>
                        <i class="fa fa-star-o" aria-hidden="true"></i>
                        <i class="fa fa-star-o" aria-hidden="true"></i>
                        <i class="fa fa-star-o" aria-hidden="true"></i>
                        <i class="fa fa-star-o" aria-hidden="true"></i>
                    </span>
                    
                    <!-- .stars -->
                </div>
                <div class="row lead">
                    <div id="hearts" class="starrr"></div>
                    <p>You gave a rating of <span id="count" value="1">0</span> star(s)</p>
                </div>
                
            </div>

JavaScript

//<script type="text/javascript">
    let clicks =0;
    function increaseNumber(){
        clicks = clicks+1;
        document.getElementById("count").textContent = clicks;
    }
//</script>