使用JS从php数组中获取数据

Question

我希望从span中回显的数组中获取点击数据，但js代码仅从第一个跨度获取所需数据，对于剩余的跨度。（使用codeigniter） ，这里是html代码

<div class="row sideBar">
          <?php foreach($data1 as $key1): ?>
          <div class="row sideBar-body">

            <div class="col-sm-9 col-xs-9 sideBar-main">
              <div class="row">
                <div class="col-sm-8 col-xs-8 sideBar-name">
                <a class="rrid"> <span class="name-meta" id="rname" ><?= $key1['name'] ?>
                </span>
                </div>
                <div class="col-sm-4 col-xs-4 pull-right sideBar-time">
                  <span class="time-meta pull-right" id="rid" ><?= $key1['id'] ?>
                </span></a>
                </div>
              </div>
            </div>
          </div>
<?php endforeach ?>
        </div>

这里是JS代码

 $(document).ready(function(){
                    $(".rrid").click(function(event){
                        event.preventDefault();
                        var rid= document.getElementById("rid").innerText;
                        var rname= document.getElementById("rname").innerText;

                        console.log(rid);
                        if(rid==''){
                          alert('ok');
                      }
                      else{

                        $("#conversation").load("chat/rmessage",{
                            rid : rid,
                            rname: rname
                        });
                      }