Jquery loop through each cart and grab the data of its class -

i have class called cartrow , contains classes title, session, date, etc , i'm trying grab each of data individually, why includes index such __0 or __1 or __2 assigned it.

can jquery expert assist me can individually alert data?

<div class="row cartrow">     <div class="col-xs-12 cartitemheader">         <h3 class="title__0">hello world 1</h3>     </div>     <div class="col-xs-12 cartitemdetail">         <div class="col-xs-7 col-sm-5">             <div class="row no-gutter">                 <div class="col-xs-12">                     <span class="session__0">fall</span>                 </div>                 <div class="col-xs-12">                     <span class="dates__0">november</span>                 </div>                 <div class="col-xs-12">                     <span class="faculty__0">jones</span>                 </div>                 <div class="col-xs-12">                     <span class="hours__0">3</span>                 </div>             </div>         </div>     </div> </div> <div class="row cartrow">     <div class="col-xs-12 cartitemheader">         <h3 class="title__1">hello world 2</h3>     </div>     <div class="col-xs-12 cartitemdetail">         <div class="col-xs-7 col-sm-5">             <div class="row no-gutter">                 <div class="col-xs-12">                     <span class="session__1">fall</span>                 </div>                 <div class="col-xs-12">                     <span class="dates__1">december</span>                 </div>                 <div class="col-xs-12">                     <span class="faculty__1">smith</span>                 </div>                 <div class="col-xs-12">                     <span class="hours__1">3</span>                 </div>             </div>         </div>     </div> </div> 

so dont need use special indicators (as if ids), because pretty renders use of classes in case useless. beauty of classes can target general group of can apply same type of functionality instead of using individual unique markers , apply same functionality each 1 of items separately.

with being said, can use .each() , .find() , classes accomplish task:

edited per comments

there's edited section in js, added itemindex attribute in html .cartrow div elements can more differentiate etc. want give uniqueness sets of data.

$(document).ready(function() {      var dataset = []; // initialize dataset array  	$('.cartrow').each(function() {      	var title = $(this).find('.title').html();          var session = $(this).find('.session').text();          var dates = $(this).find('.dates').text();          var faculty = $(this).find('.faculty').text();          var hours = $(this).find('.hours').text();          var index = $(this).attr('itemindex');          $('.results').append(index + ', ' + title + ', ' + session + ', ' + dates + ', ' + faculty + ', ' + hours + '<br/>');          // can whatever want information                    // edited part may need individual data sets          // creat new object data inside of it;          var item = {              'title': title,              'session': session,              'dates': dates,              'faculty': faculty,              'hours': hours,          };          dataset[index] = item; // add object array dataset      });            $('.getinfo').on('click', function() {      	var selectindex = $('.selectindex').val();          var selecttype = $('.selectvaluetype').val();          var result = '';          if (selectindex != '' && selecttype != '') {              result = dataset[selectindex][selecttype];          }          $('.specificresults').html(result);                                 });                // specific information want      // dataset[desiredindexnumber].desiredtype      console.log("faculty: "+ dataset[2].faculty + ", session: "+ dataset[2].session + '');  });

.cartrow {      width: 200px;      display: inline-block;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="row cartrow" itemindex = "1">      <div class="col-xs-12 cartitemheader">          <h3 class="title">hello world 1</h3>      </div>      <div class="col-xs-12 cartitemdetail">          <div class="col-xs-7 col-sm-5">              <div class="row no-gutter">                  <div class="col-xs-12">                      <span class="session">fall</span>                  </div>                  <div class="col-xs-12">                      <span class="dates">november</span>                  </div>                  <div class="col-xs-12">                      <span class="faculty">jones</span>                  </div>                  <div class="col-xs-12">                      <span class="hours">3</span>                  </div>              </div>          </div>      </div>  </div>  <div class="row cartrow" itemindex = "2">      <div class="col-xs-12 cartitemheader">          <h3 class="title">hello world 2</h3>      </div>      <div class="col-xs-12 cartitemdetail">          <div class="col-xs-7 col-sm-5">              <div class="row no-gutter">                  <div class="col-xs-12">                      <span class="session">fall</span>                  </div>                  <div class="col-xs-12">                      <span class="dates">december</span>                  </div>                  <div class="col-xs-12">                      <span class="faculty">smith</span>                  </div>                  <div class="col-xs-12">                      <span class="hours">3</span>                  </div>              </div>          </div>      </div>  </div>  <br/><br/>  <div class="results">      <strong>results</strong><br/>  </div>  <br/><br/>  type in index number: <input class="selectindex" type="text" /><br/>  type in data value type: (title, session, dates, faculty, hours)<input class="selectvaluetype" type="text" /><br/>  <button class="getinfo">get information pls</button><br/>  <strong>results</strong><br/>  <div class="specificresults">  </div>