JQuery get siblings value / text in dynamically created element-CodePudding

I want to get the .text() of the sibling customerID from the class"db_record_left" when gets clicked. The whole is dynamical generated. But the console.log(CustID); still prints it for every and not only for the clicked one.

echo'
                    <div  id="potentialCustomer-'.$countPotentialCustomers.'">
                        <div >
                            <div >'.$cus_Fname.' '.$cus_Lname.'</div>
                            <div >
                                <div >Adresse:</div>
                                <div >'.$cus_Adress.'</div>
                                <div >
                                    <span>'.$cus_ZipCode.' </span>
                                    <span>'.$cus_Locality.'</span>
                                </div>
                            </div>
                            <div >
                                <div >Fahrzeuge:</div>
                                '.matchVehicles($cus_Vehicles).'
                            </div>
                        </div>
                        <div >
                            <div >
                                <span >navigate_next</span>
                            </div>
                        </div>
                    </div>
                    <span  style="display: none">'.$cus_ID.'</span>                
                ';

This would be the jQuery-code

function checkCustomerInformation(){
    $(".db_records_wrapper").on('click', 'div.db_record', function (){
        const CustID = $(this).siblings(".customerID").text();
        console.log(CustID);
    });
}

CodePudding user response：

siblings() gets every matching sibling element. To get only the only following the .db_record which was clicked, use next():

$(this).next(".customerID").text();

Here's a working example:

function checkCustomerInformation() {
  $(".db_records_wrapper").on('click', 'div.db_record', function() {
    const custID = $(this).next(".customerID").text();
    console.log(custID );
  });
}

checkCustomerInformation();

.db_record {
  margin: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div >
  <div  id="potentialCustomer-'.$countPotentialCustomers.'">
    <div >
      <div >$cus_Fname1 $cus_Lname1</div>
      <div >
        <div >Adresse:</div>
        <div >$cus_Adress1</div>
        <div >
          <span>$cus_ZipCode1</span>
          <span>$cus_Locality1</span>
        </div>
      </div>
      <div >
        <div >Fahrzeuge:</div>
        matchVehicles($cus_Vehicles1)
      </div>
    </div>
    <div >
      <div >
        <span >navigate_next</span>
      </div>
    </div>
  </div>
  <span  style="display: none">$cus_ID1</span>

  <div  id="potentialCustomer-'.$countPotentialCustomers.'">
    <div >
      <div >$cus_Fname2 $cus_Lname2</div>
      <div >
        <div >Adresse:</div>
        <div >$cus_Adress2</div>
        <div >
          <span>$cus_ZipCode2</span>
          <span>$cus_Locality2</span>
        </div>
      </div>
      <div >
        <div >Fahrzeuge:</div>
        matchVehicles($cus_Vehicles2)
      </div>
    </div>
    <div >
      <div >
        <span >navigate_next</span>
      </div>
    </div>
  </div>
  <span  style="display: none">$cus_ID2</span>
</div>