Image splicing with for loop

Question

I'm busy making a bootstrap single-page layout and I would like to add four circled images spaced equally between each other but with a bit of a twist! I want to use splice from javascript on the images (add and remove method) in a for loop so that if someone clicks on one of the circled images it replaces the last one, is this even possible? Was busy making the circles and thought about it as a twist!

Example Image

I know there's a bunch of people going to hate me for asking but I would really appreciate the help.

Thanks in advance.

Edit

I'm going to add text that is aligned with each circle, but would like the text to fade out WITH the circles as well! Think that would be cool!

Edit V.2

So I was asked to add code but this was actually a question if it's possible so here goes nothing...

The three circles created in bootstrap...

<section>
        <div class="container">
            <div class="row">
                <div class="col-sm-3">
                    <img class="rounded-circle img-fluid mx-auto d-block" src="../assets/partner1.jpg" />
                    <h6 class="text-center g-mt-50 font-weight-bold">Bradley Hunter</h6>
                    <p class="text-center g-mt-50">
                        Based in Chicago. I love playing tennis and loud music.
                    </p>
                </div>
                <div class="col-sm-3">
                    <img class="rounded-circle img-fluid mx-auto d-block" src="../assets/partner2.jpg" />
                    <h6 class="text-center g-mt-50 font-weight-bold">Marie Bennet</h6>
                    <p class="text-center g-mt-50">
                        Currently living in Colorado. Lover of art, languages and travelling.
                    </p>
                </div>
                <div class="col-sm-3">
                    <img class="rounded-circle img-fluid mx-auto d-block" src="../assets/partner3.jpg" />
                    <h6 class="text-center g-mt-50 font-weight-bold">Diana Wells</h6>
                    <p class="text-center g-mt-50">
                        Living in Athens, Greece. I love black and white classics, chillout music and green tea.
                    </p>
                </div>
                <div class="col-sm-3">
                    <img class="rounded-circle img-fluid mx-auto d-block" src="../assets/partner4.jpg" />
                    <h6 class="text-center g-mt-50 font-weight-bold">Christopher Pierce</h6>
                    <p class="text-center g-mt-50">
                        Star Wars fanatic. I have a presistent enthusiasm to create new things.
                    </p>
                </div>
            </div>
        </div>
    </section>

Saw this on stackoverflow Remove items from array with splice in for loop

var searchInput, i;

searchInput = ["this", "is", "a", "test"];
i = searchInput.length;
while (i--) {
    if (searchInput[i].length < 4) {
        searchInput.splice(i, 1);
    }
}

But I want to use images instead like described in the image that I have added.

Edit V.3

So after hours and hours of googling and reading other peoples methods, I finally came to what I wanted... but now I can't seem to figure out how to refresh the DIV tag instead of the whole page so that the for loop can be continuous on click

code so far

let image_arr = [{
    id: 'part_1',
    image_src: '../assets/partner1.jpg',
    h6_tag: 'Bradley Hunter',
    p_tag: 'Based in Chicago. I love playing tennis and loud music.',
  },
  {
    id: 'part_2',
    image_src: '../assets/partner2.jpg',
    h6_tag: 'Marie Bennet',
    p_tag: 'Currently living in Colorado. Lover of art, languages and travelling.',
  },
  {
    id: 'part_3',
    image_src: '../assets/partner3.jpg',
    h6_tag: 'Diana Wells',
    p_tag: 'Living in Athens, Greece. I love black and white classics, chillout music green tea.',
  },
  {
    id: 'part_4',
    image_src: '../assets/partner4.jpg',
    h6_tag: 'Christopher Pierce',
    p_tag: 'Star Wars fanatic. I have a persistent enthusiasm to create new things.',
  },
];

$(document).ready(function () {
  // create
  createPartnerRow(image_arr);
})

$(document).ready(function () {
  $("[id^=part_]").hover(function (image_arr) {
      $(this).addClass('border')
    },
    function () {

    });
});

$("[id^=part_]").ready(function () {
  $("[id^=part_]").click(function () {
    $(this).removeClass('border')
    // set value
    var current_partner = image_arr[0];
    // remove first element from array
    image_arr = image_arr.splice(1, 4);
    // append current_partner to end of array
    image_arr.push(current_partner);
    // clear the row of all partners;
    $('#part_1, #part_2, #part_3, #part_4').remove();
    // recreate row
    console.log(image_arr);
    createPartnerRow(image_arr);
  });
})


function createPartnerRow(image_arr) {
  for (i = 0; i < image_arr.length; i++) {
    $('#partner_row').append(
      '<div class="col-md-3 col-sm-6 p-3" id="' + image_arr[i].id + '">' +
      '<button class="border-0 bg-white">' +
      '<img class="rounded-circle img-fluid mx-auto d-block" src="' + image_arr[i].image_src + '"' + '/>' +
      '<h6 class="text-center g-mt-50 font-weight-bold pt-2">' + image_arr[i].h6_tag + '</h6>' +
      '<p class="text-center g-mt-50 pt-2">' + image_arr[i].p_tag + '</p>' +
      '</button>' +
      '</div>'
    )
  }
}

function refreshdiv() {
  $("#partner_row").load(location.href + " #partner_row>*", "");
}

Could anyone point me in the right direction?