Append a radio button in list item after ajax call by using jquery

Question

I have jQuery code which creates variables and sends them to a PHP file by using AJAX. From the response I want to create a row of several list items that would be appended to their parents.

Everything works fine but the problem is that in this list items there is a radio button that every time will be appended in the first column of the row, like the other data, but when I want to toggle them all of the radios would be remain checked and the siblings of the selected one does not get unchecked.

I have tried to find the index of each radio button. I always get the index value of 0. The radios have the same class name, so when I check the length of them I get the actual value, more than 0.

$(document).ready(function() {
  var add = '#submit';

  $(document).off().on('click', add, function(e) {
    e.preventDefault();
    var v1 = $('#value1').val();
    var v2 = $('#value2').val();

    $.ajax({
      type: "POST",
      url: "addsettings.php",
      data: {
        v1: v1,
        v2: v2
      },
      success: function(data) {
        if (data.includes("error")) {
          $('#message').html(data);
        } else {
          var result = $.parseJSON(data);
          var radio = result['radio'];
          var value = result['value'];

          var radiocheck = '<li><input type="radio" class="radiocheck" value="' + radio + '" /></li>';
          var insertvalue = '<li><div></div></li>';
          $('.result> .radiocheck').append(radiocheck);
          $('.result> .value').append(insertvalue);
        }
      }
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="submit" id=submit></button>
<input type="text" id="value1" />
<input type="text" id="value2" />
<div class="result">
  <ul class="radiocheck"></ul>
  <ul class="value"></ul>
</div>

In the picture it is clear that both radio buttons are clicked and checked and they're not toggled.