Radio Buttons not working correctly

Good morning, all. I have a client who wants a standard 5-star survey form set up. No big deal…first group works exactly as I want it to. But it falls down when I add the second group. Suddenly the first group defaults to whatever button is clicked in the second group. I’ve renamed the groups so they’re individualized, but still no luck. The CSS and HTML I’m using follow below. Any suggestions or advice would be welcome. Thanks!

*Note: edited as per ieahleen. Thank you! I’m obviously new here. :slight_smile:

 <style>
            .txt-center {
            text-align: center;
            }
            .hide {
            display: none;
            }
            .clear {
            float: none;
            clear: both;
            }
            .rating {
            width: 90;
            unicode-bidi: bidi-override;
            direction: rtl;
            text-align: center;
            position: relative;
            }
            .rating > label {
            float: center;
            display: inline;
            padding: 0;
            margin: 0;
            position: relative;
            width: 2.2em;
            cursor: pointer;
            color: #000;
            }
            .rating > label:hover,
            .rating > label:hover ~ label,
            .rating > input.radio-btn:checked ~ label {
            color: transparent;
            }
            .rating > label:hover:before,
            .rating > label:hover ~ label:before,
            .rating > input.radio-btn:checked ~ label:before,
            .rating > input.radio-btn:checked ~ label:before {
            content: "\2605";
            position: absolute;
            left: 0;
            color: #FF0a0a;
            }
        </style>

 <p> Was your call handled courteously and professionally?</p>
            <div>
            <div class="txt-center">
            <div class="rating">
            <input name="professional" id="star5"  type="radio" value="5" class="radio-btn hide">
            <label for="star5">☆</label>
            <input name="professional" id="star4"  type="radio" value="4" class="radio-btn hide">
            <label for="star4">☆</label>
            <input name="professional" id="star3" type="radio" value="3" class="radio-btn hide">
            <label for="star3">☆</label>
            <input name="professional" id="star2"  type="radio" value="2" class="radio-btn hide">
            <label for="star2">☆</label>
            <input name="professional" id="star1" type="radio" value="1" class="radio-btn hide">
            <label for="star1">☆</label>
            <div class="clear"></div>
            </div>
            <div class="justified"><textarea id="your comments" style="border: 3px solid rgb(255, 10, 10); border-image: none;" rows="4" cols="75">Please enter any remarks you'd like to add here.</textarea></div>
            <p> Was the reason for your call resolved in a prompt and efficient manner?</p>
            <div>
            <div class="txt-center">
            <div class="rating">
            <input name="prompt" id="star5"  type="radio" value="5" class="radio-btn hide">
            <label for="star5">☆</label>
            <input name="prompt" id="star4"  type="radio" value="4" class="radio-btn hide">
            <label for="star4">☆</label>
            <input name="prompt" id="star3" type="radio" value="3" class="radio-btn hide">
            <label for="star3">☆</label>
            <input name="prompt" id="star2"  type="radio" value="2" class="radio-btn hide">
            <label for="star2">☆</label>
            <input name="prompt" id="star1" type="radio" value="1" class="radio-btn hide">
            <label for="star1">☆</label>
            <div class="clear"></div>
            </div>
            <div class="justified"><textarea id="your comments" style="border: 3px solid rgb(255, 10, 10); border-image: none;" rows="4" cols="75">Please enter any remarks you'd like to add here.</textarea></div> <```>

please post a link to your project or format the code properly, otherwise it is impossible to help you

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums