Javascript JQuery只返回单击函数第一行的属性

我正在填充数据库中的行列表，其中每个用户都有一个复选框（

datauid

）。我正在使用

数据uid

和对我的PHP文件的Ajax调用，该调用将在选中时使列表公开，在未选中时使列表私有。我的代码看起来不错，但当我选中任何行的任何复选框时，只有第一行受到影响。我做了一个跟踪，我注意到无论我点击哪个复选框，它只得到第一个复选框的值

这是我的密码。感谢您的帮助：

PHP代码片段

<?php
    foreach($results as $row){
?>
        <div class="switch">
            <?php
                if($row['is_active'] == 1){
            ?>
                <input data-uid="<?= $row['listing_uid'] ?>" data-active="1" id="cmn-toggle-1" class="switchBtn cmn-toggle cmn-toggle-round" type="checkbox" checked />
            <?php
                }else if($row['is_active'] == 0){
            ?>
                <input data-uid="<?= $row['listing_uid'] ?>" data-active="0" id="cmn-toggle-1" class="switchBtn cmn-toggle cmn-toggle-round" type="checkbox" />
            <?php
                }
            ?>
            <label for="cmn-toggle-1"></label>
        </div>
<?php
    }
?>

---

将不同的名称添加到您的复选框。页面上的ID必须唯一。现在，对于每一行，输入字段都具有相同的ID（ID=“cmn-toggle-1”）。向复选框添加不同的名称。页面上的ID必须唯一。现在，对于每一行，输入字段都具有相同的ID（ID=“cmn-toggle-1”）。

$(".switchBtn").click(function(e){
    e.preventDefault();
    var data_uid = $(this).attr('data-uid');
    var data_active = $(this).attr('data-active');
    var data_string = 'data_uid='+data_uid+'&data_active='+data_active;
    alert(data_string);
    $.ajax({
        url: '../includes/set_listing.php',
        type: 'POST',
        data: data_string,
        success:function(e){
            window.location.reload();
        },
        error:function(e){
            //alert(e);
        }
    }); 
});