如何在jquery中检测在php循环中单击了哪个按钮元素？

So my code is something like this:-

for($i=0;$i<$length;$i++){
?>
<div id="scoreDiv">
    <input type="text"  name="myscore"  placeholder="Enter your score" required>
    <input type="text"  name="oppoScore"  placeholder="Your opponent score" required>
    <input id="submitScore" type="submit" value="submit" >
</div>
<?php
}
?>

In Jquery I want to detect which button was clicked and based on that button I want to take the input field entered by user.

You can do it like below (one example):-

$(document).ready(function(){
  $('.submitScore').click(function(e){
       e.preventDefault();
      alert($(this).prev().attr('name'));
    
    });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="scoreDiv">

                <input type="text"  name="myscore"  placeholder="Enter your score" required>
                <input type="text"  name="oppoScore"  placeholder="Your opponent score" required>
                <input class="submitScore" type="submit" value="submit" >

        </div>
<div id="scoreDiv">

                <input type="text"  name="myscore1"  placeholder="Enter your score1" required>
                <input type="text"  name="oppoScore1"  placeholder="Your opponent score1" required>
                <input class="submitScore" type="submit" value="submit" >

        </div>

Note:- class is treated as group-selector while id is treated as individual-selector in Jquery.Thanks

</div>

You could try something like the below:

$(function(){

    $(".js-btn").on("click",function(){
        var btn = $(this);
        var txtBoxes = btn.siblings('input');
        console.log($(txtBoxes[0]).val());
        console.log($(txtBoxes[1]).val());
    });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="scoreDiv">
    <input type="text"  name="myscore"  placeholder="Enter your score" required>
    <input type="text"  name="oppoScore"  placeholder="Your opponent score" required>
    <input id="submitScore" type="submit" value="submit" class="js-btn" >
</div>
<div id="scoreDiv">
    <input type="text"  name="myscore"  placeholder="Enter your score" required>
    <input type="text"  name="oppoScore"  placeholder="Your opponent score" required>
    <input id="submitScore" type="submit" value="submit" class="js-btn" >
</div>
<div id="scoreDiv">
    <input type="text"  name="myscore"  placeholder="Enter your score" required>
    <input type="text"  name="oppoScore"  placeholder="Your opponent score" required>
    <input id="submitScore" type="submit" value="submit" class="js-btn" >
</div>
<div id="scoreDiv">
    <input type="text"  name="myscore"  placeholder="Enter your score" required>
    <input type="text"  name="oppoScore"  placeholder="Your opponent score" required>
    <input id="submitScore" type="submit" value="submit" class="js-btn" >
</div>

</div>

Since id should be unique, Use class attribute instead of id and try below code:

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="application/javascript">
    $(document).ready(function () {
        $('.submitScore').on('click',function () {
            var div_el = $(this).parent('.scoreDiv');
            var myscore = div_el.find('input[name="myscore"]').val();
            var oppoScore = div_el.find('input[name="oppoScore"]').val();

            alert(myscore+'----'+oppoScore);
            return false;
        })
    });
</script>
</head>





<?php
for($i=0;$i<5;$i++){
?>
<div class="scoreDiv">

<input type="text"  name="myscore"  placeholder="Enter your score" required>
<input type="text"  name="oppoScore"  placeholder="Your opponent score" required>
<input class="submitScore" type="submit" value="submit" >

</div>
<?php
}
?>