Star rating only rates upto 4 stars

I am working with the Couchcms v2.3 to create the directory website and recently I was trying to implement the star rating system to the page but I was unable to get the 5 star rating work properly. I am only able to rate upto 1 to 4 stars but when I click on the 5 stars nothing happens. Please help me to make it work properly or share your code that works properly. Thanks in advance.

Here is my code. `

<?php require_once( 'couch/cms.php' ); ?>
<cms:template title='Rate' order='50000' hidden='1'>    
    <cms:editable type='vote_stars' search_type='decimal' name='my_stars' />
</cms:template>
<!DOCTYPE html>
<html>

<head>
    <title>Star Rate</title>   
    <style>
        .rating {
      float:left;
    }
    /* :not(:checked) is a filter, so that browsers that don’t support :checked don’t 
      follow these rules. Every browser that supports :checked also supports :not(), so
      it doesn’t make the test unnecessarily selective */
    .rating:not(:checked) > input {
        position:absolute;
        top:-9999px;
        clip:rect(0,0,0,0);
    }
    .rating:not(:checked) > label {
        float:right;
        width:1em;
        /* padding:0 .1em; */
        overflow:hidden;
        white-space:nowrap;
        cursor:pointer;
        font-size:300%;
        /* line-height:1.2; */
        color:#ddd;
    }
    .rating:not(:checked) > label:before {
        content: '★ ';
    }
    .rating > input:checked ~ label {
        color: dodgerblue;
    }
    .rating:not(:checked) > label:hover,
    .rating:not(:checked) > label:hover ~ label {
        color: dodgerblue;
    }
    .rating > input:checked + label:hover,
    .rating > input:checked + label:hover ~ label,
    .rating > input:checked ~ label:hover,
    .rating > input:checked ~ label:hover ~ label,
    .rating > label:hover ~ input:checked ~ label {
        color: dodgerblue;
    }
    .rating > label:active {
        position:relative;
        top:2px;
        left:2px;
    }
</style>
</head>

<body>
    <cms:form masterpage=k_template_name mode='edit' page_id=k_page_id anchor='0' method='post'>
        <cms:if k_success>
            <cms:db_persist_form my_stars=frm_stars />
            <cms:redirect k_page_link />
        </cms:if>
        <div class="rating">
            <cms:input type='radio' name="stars" opt_values='5 | 4 | 3 | 2 | 1' />
            <input type="submit" name="submit" value="" />
        </div>
     </cms:form>
     <br>
    <cms:show_votes 'my_stars'>
        <br>
        <p>
            <cms:dump />
        </p>
    </cms:show_votes>
</body>
<script src="https://code.jquery.com/jquery-3.6.3.slim.min.js" integrity="sha256-ZwqZIVdD3iXNyGHbSYdsmWP//UBokj2FHAxKuSBKDSo=" crossorigin="anonymous"></script>
<script type="text/javascript">
$('input[type=radio]').hide();
$(document).ready(function() {
    // make following action fire when radio button changes
    $('input[type=radio]').change(function() {
        // find the submit button and click it on the previous action
        $('input[type=submit]').click()
    });
});
</script>

</html>
<?php COUCH::invoke(); ?>

Solution

The script does not fire the change event, because the fith option is already rendered as checked="checked". One way to fix that would be to amend the editable definition as follows

<cms:input type='radio' name="stars" opt_values='5 | 4 | 3 | 2 | 1' opt_selected='-'/>

An impossible value for the opt_selected parameter allows to render the field unchecked completely.

Alternative way would be to fix the script by using another event, e.g. click

$('input[type=radio]').click(function() {