Get values of different elements with $(this)

Question

EDIT: Solved!, I also updated the code for the future. when someone will look for this kind of problem.

Thanks to: Nesaje

I have a div that is generated using a loop. Inside that div there is a fieldset element for radio buttons and a text input. I can get the radio button value with the change event, but I can't get the text input. The radio buttons and text are generated from loop so I don't have specific ID.

$("body").on("change", "#star-rate input:radio", function(e) {
  var score = $(this).val();
  var comment = $(this)
    .parents('.row.stars-comment-container') // Find common parent container (notice class name ;)
    .find('input[name=comment]')                         // Once there, find input with name = comment (name can be duplicated)
    .val();
  console.log('comment: ' + comment + ' - score:' + score);
});

   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

   <div class="col-12" id="star-rate" style="padding-top:10px">
  <div class="row stars-comment-container">
  <!-- (Genarated via loop)This is expected to be repeated => stars and comments together. -->
    <div style="padding-top:7px; width:110px"><span class="pull-right" style="font-size:16px"><b>Rate:&nbsp;</b></span>
    </div>
    <div class="star-rate">
      <fieldset class="rate">
        <input type="radio" data-id="{{$fA->id}}" id="s5-{{$fA->id}}" name="score" value="5.00" />
        <input type="radio" data-id="{{$fA->id}}" id="s5-{{$fA->id}}" name="score" value="4.00" />
        <input type="radio" data-id="{{$fA->id}}" id="s5-{{$fA->id}}" name="score" value="3.00" />
        <input type="radio" data-id="{{$fA->id}}" id="s5-{{$fA->id}}" name="score" value="2.00" />
        <input type="radio" data-id="{{$fA->id}}" id="s5-{{$fA->id}}" name="score" value="1.00" />
      </fieldset>
    </div>
    <div class="col-12">
        <input type="text" class="form-control" name="comment">
    </div>
  </div>
  <!-- Moved inside common parent container -->
  <!-- class="col-12"><input type="text" class="form-control" name="comment" id="comment"></div> -->
</div>

Answer 1

although I am still not sure what exactly you want, but what I am getting by your question that on form Submit you need this value in Text field, or if you want to just get the text input value you can do this on keyup. So in case 1, when you need to get the comment on submit of form:

$(selector).submit(function(){
    var textVal = $('#comment').val();
});  

and for case 2 you can use keyup when user is typing:

$("body").on("keyup", "#comment", function(e) {
   var textValue= $(this).val();
   console.log('comment: ' + textValue);
 });  

Answer 2

Updated answer based on comment and fact there will be more groups of stars and comments.

I've modified slightly HTML provided like this (to bring stars and comment into the same container, removed comment id, as that cannot be duplicated).

    <div class="col-12" id="star-rate" style="padding-top:10px">
  <div class="row stars-comment-container"> <!-- This is expected to be repeated => stars and comments together. -->
    <div style="padding-top:7px; width:110px"><span class="pull-right" style="font-size:16px"><b>Rate:&nbsp;</b></span>
    </div>
    <div class="star-rate">
      <fieldset class="rate">
        <input type="radio" data-id="{{$fA->id}}" id="s5-{{$fA->id}}" name="score" value="5.00" />
        <input type="radio" data-id="{{$fA->id}}" id="s5-{{$fA->id}}" name="score" value="4.00" />
        <input type="radio" data-id="{{$fA->id}}" id="s5-{{$fA->id}}" name="score" value="3.00" />
        <input type="radio" data-id="{{$fA->id}}" id="s5-{{$fA->id}}" name="score" value="2.00" />
        <input type="radio" data-id="{{$fA->id}}" id="s5-{{$fA->id}}" name="score" value="1.00" />
      </fieldset>
    </div>
    <div class="col-12">
        <input type="text" class="form-control" name="comment">
    </div>
  </div>
  <!-- Moved inside common parent container -->
  <!-- class="col-12"><input type="text" class="form-control" name="comment" id="comment"></div> -->
</div>

With this in place, consider the following JS snippet

$("body").on("change", "#star-rate input:radio", function(e) {
  var score = $(this).val();
  var comment = $(this)
    .parents('.row.stars-comment-container') // Find common parent container (notice class name ;)
    .find('input[name=comment]')                         // Once there, find input with name = comment (name can be duplicated)
    .val();
  console.log('comment: ' + comment + ' - score:' + score);
});

This should solve your problem.