Keeping specific text in sepearate divs with random images on load

I currently have some script that will randomise the images when the user refreshes the page.

var large_images = [
  "wp-content/themes/workroomv2/images/headshot1.jpg",    
  "wp-content/themes/workroomv2/images/headshot2.jpg",    
  "wp-content/themes/workroomv2/images/headshot3.jpg",    
  "wp-content/themes/workroomv2/images/large1.jpg",   
  "wp-content/themes/workroomv2/images/large2.jpg",   
  "wp-content/themes/workroomv2/images/large3.jpg" 
];

var arr = [];

$.each(large_images,
  function(i, el) {
    setTimeout(function() {
      arr.push(el);
      if (arr.length === large_images.length) {
        $(".item.large img")
          .attr("src", function(i, src) {
            return arr[i]
        })
    }
   }, 1 + Math.floor(Math.random() * 5))
 });

However I want to keep certain content with the images, as this is describing team members (name, content, button). After thinking doing the same as above but with text doesn't work due to it being random. The HTML structure is below. I will need to put text in each span.

    <div class="item">
        <div class="inner">
            <a href="#">
                <img id="" class="people" src="" alt="test">
                <div class="text">
                    <span class="title"></span>
                    <span class="sub-title"></span>
                    <span class="content"></span>
                </div>
            </a>
        </div>
    </div>

I cannot work out where how to keep the content with the images when they are randomising. Any advice on this would be great.