How to capture radio input value of an object with ajax?

Question

My doubt is as follows. I have a PHP code that creates card for each record you bring from the bank. I am not able to capture the value of the radio that was selected. I can capture only the value of the first card, of the others I cannot. follows my codes.

PHP that creates the cards

if ($resultado_id) {    

while ($registro = mysqli_fetch_array($resultado_id, MYSQLI_ASSOC)) {
    echo '<div class=" cardUser col-md-12">
    <div class="cardNome">
    <span>'.$registro['nome'].'</span>
    </div>
    <div class="cardPro">
    <span class="glyphicon glyphicon-education"> '.$registro['idProfissao'].'</span>
    <span class="cardPro2 glyphicon glyphicon-education"> '.$registro['idProfissao2'].'</span>
    </div>
    <div class="cardInfo">
    <ul class="cardUl">
    <li class="cardLi">
    <span class="cardValue glyphicon glyphicon-globe"> '.$registro['idCidade'].'</span>
    <span class="cardValue glyphicon glyphicon-earphone" id="tel"> '.$registro['telefone'].'</span>
    </li>
    </ul>
    <div class="estrelas">
    <ul class="cardUl">
    <li class="cardLi">
    <span class="cardLabel">Status:</span>
    <span class="cardValue"> '.$registro['disponibilidade'].'</span>
    </li>
    <li class="cardLi">
    <form id="estrela" method="post" action="like.php">
    <span class="cardLabel">Avaliação:</span>              
    <input type="radio" id="cm_star-empty-'.$registro['id'].'" name="fb" value="" checked/>
    <label for="cm_star-1-'.$registro['id'].'"><i class="fa"></i></label>
    <input type="radio" id="cm_star-1-'.$registro['id'].'" name="fb" value="1"/>
    <label for="cm_star-2-'.$registro['id'].'"><i class="fa"></i></label>
    <input type="radio" id="cm_star-2-'.$registro['id'].'" name="fb" value="2"/>
    <label for="cm_star-3-'.$registro['id'].'"><i class="fa"></i></label>
    <input type="radio" id="cm_star-3-'.$registro['id'].'" name="fb" value="3"/>
    <label for="cm_star-4-'.$registro['id'].'"><i class="fa"></i></label>
    <input type="radio" id="cm_star-4-'.$registro['id'].'" name="fb" value="4"/>
    <label for="cm_star-5-'.$registro['id'].'"><i class="fa"></i></label>
    <input type="radio" id="cm_star-5-'.$registro['id'].'" name="fb" value="5"/>
    </li>        
     <button type="submit" class="btn btn-info btn-sm btn-like" id="btn-like-'.$registro['id'].'" data-id_usuario="'.$registro['id'].'">Avaliar</button>  
    </form>      
    </ul>
    </div>
    </div>
    </div>
    ';
}

Javascript passing values via ajax

<script type="text/javascript">
    $(document).ready( function () {

        $('.btn-like').click(function(){
            var id_usuario = $(this).data('id_usuario');
            var estrela = document.querySelector('input[name="fb"]:checked').value;


            $('#btn-like-'+id_usuario).hide();

            $.ajax({
             url: 'like.php',
             method: 'post',
             data: { like_id_usuario: id_usuario, estrelas: estrela },
             success:function (data) {
                alert(data);
            }
        });

        });
    });  
</script>

OBS

I tried instead of:

var estrela = document.querySelector('input[name="fb"]:checked').value;

Place:

var estrela = $(this)("input[name='fb']:checked").val();

But it doesn’t work.

Answer 1

Just change the:

var estrela = $(this)("input[name='fb']:checked").val();

To:

var estrela = $("input[name='fb']:checked").val()

I was wrong the way I was calling.

Follow an example working:

function getRadios(){
    var radios = $("input[name='fb']:checked").val()
    alert(radios);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="cm_star-1-1"><i class="fa"></i></label>
<input type="radio" id="cm_star-1-1" name="fb" value="1"/>

<label for="cm_star-2-2"><i class="fa"></i></label>
<input type="radio" id="cm_star-2-2" name="fb" value="2"/>

<label for="cm_star-3-3"><i class="fa"></i></label>
<input type="radio" id="cm_star-3-3" name="fb" value="3"/>

<label for="cm_star-4-4"><i class="fa"></i></label>
<input type="radio" id="cm_star-4-4" name="fb" value="4"/>

<label for="cm_star-5-4"><i class="fa"></i></label>
<input type="radio" id="cm_star-5-4" name="fb" value="5"/>

<br />
<br />
<br />
<br />

<button onclick="getRadios()">pegar selecionado</button>