problem in asp.net webform using radio button html in reapeater

Question

When I use radio button html without using repeater, there is no problem and it works properly, but when I use repeater, jQuery functions do not work. Thank you for your help

Styles and JS Link

        <style>
    html, body {
      height: 100%;
      width: 100%;
      margin: 0;
    }

    body {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #222;
    }

    .custom-radios div {
      display: inline-block;
    }
    .custom-radios input[type="radio"] {
      display: none;
    }
    .custom-radios input[type="radio"] + label {
      color: #333;
      font-family: Arial, sans-serif;
      font-size: 14px;
    }
    .custom-radios input[type="radio"] + label span {
      display: inline-block;
      width: 40px;
      height: 40px;
      margin: -1px 4px 0 0;
      vertical-align: middle;
      cursor: pointer;
      border-radius: 50%;
      border: 2px solid #FFFFFF;
      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);
      background-repeat: no-repeat;
      background-position: center;
      text-align: center;
      line-height: 44px;
    }

    .custom-radios input[type="radio"] + label{
      display: flexbox;
      color: #FFFFFF;

    }
    .custom-radios input[type="radio"] + label span img {
      opacity: 0;
      transition: all .3s ease;
    }
    .custom-radios input[type="radio"]#color-1 + label span {
      background-color: #2ecc71;
    }
    .custom-radios input[type="radio"]#color-2 + label span {
      background-color: #3498db;
    }
    .custom-radios input[type="radio"]#color-3 + label span {
      background-color: #f1c40f;
    }
    .custom-radios input[type="radio"]#color-4 + label span {
      background-color: #e74c3c;
    }
    .custom-radios input[type="radio"]:checked + label span img {
      opacity: 1;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

Controls/Form

    <form id="form1" runat="server">
        <div>
            <span id="submittername" style="color: #FFFFFF"></span>
            <br />


            <div class="custom-radios">
                <asp:Repeater ID="rptChild" runat="server">
                    <ItemTemplate>

                        <div>
                            <span style="color: #ffffff;display:grid;position: relative;left:10px; bottom: 10px;"><%# Eval("ColorName") %></span>
                            <input type="radio" id="<%# Eval("ColorID") %>" name="color" value="<%# Eval("ColorName") %>">
                            <label for="color-1">
                              <span>
                                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg" alt="Checked Icon" />
                              </span>
                            </label>
                          </div>
  

                    </ItemTemplate>
                </asp:Repeater>
  


              <div>

                  <span style="color: #ffffff;display:grid;position: relative;left:10px; bottom: 10px;">blue</span>
                    <input type="radio" id="color-2" name="color" value="blue">
                    <label for="color-2">
                      <span>
                        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg" alt="Checked Icon" />
                      </span>
                    </label>
                  </div>
  
              <div>
                  <span style="color: #ffffff;display:grid;position: relative;left:10px; bottom: 10px;">yellow</span>
                    <input type="radio" id="color-3" name="color" value="yellow">
                    <label for="color-3">
                      <span>
                        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg" alt="Checked Icon" />
                      </span>
                    </label>
                  </div>

              <div>
                  <span style="color: #ffffff;display:grid;position: relative;left:10px; bottom: 10px;">red</span>
                    <input type="radio" id="color-4" name="color" value="red">
                    <label for="color-4">
                      <span>
                        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg" alt="Checked Icon" />
                      </span>
                    </label>
                  </div>
            </div>

        </div>
    </form>

Javascript

    <script>
        $(document).ready(function () {
            $("input:radio[name=color]:first").attr('checked', true);
            var selValue = $("input[type='radio']:checked").val();
            $("#submittername").text(selValue);
            //console.log(selValue);
        });
        $(".custom-radios").click(function () {
            var selValue = $("input[type='radio']:checked").val();
            $("#submittername").text(selValue);
            //console.log(selValue);
        });
      </script>

Simple code works without repeater.

In repeater there are 3 colors that document.ready correctly, but when click does not work.
Below that are simple codes that work properly without repeater.
The problem is using the repeater with jQuery.