Сращивание изображения с циклом for

Question

Я занят созданием загрузочного одностраничного макета, и я хотел бы добавить четыре окруженных изображения, расположенных на одинаковом расстоянии друг от друга, но с небольшим поворотом!Я хочу использовать склейку из javascript для изображений (метод добавления и удаления) в цикле for, чтобы, если кто-то нажимает на одно из изображений в кружке, оно заменяет последнее, возможно ли это?Был занят созданием кругов и думал об этом как о повороте!

Пример изображения

Я знаю, что собирается множество людейненавидеть меня за просьбу, но я был бы очень признателен за помощь.

Заранее спасибо.

Редактировать

I 'Я собираюсь добавить текст, который выровнен с каждым кругом, но хотел бы, чтобы текст также исчезал с кругами!Думаю, это было бы круто!

Edit V.2

Поэтому меня попросили добавить код, но на самом деле это был вопрос, если это возможно, поэтому здесь ничего не идет ...

Три окружности, созданные в начальной загрузке ...

<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>

Увидел это в stackoverflow Удалить элементы из массива с объединением цикла for

var searchInput, i;

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

Но вместо этого я хочу использовать изображения, как описано на изображении, которое я добавил.

Редактировать V.3

Так что после нескольких часов поисков и поискачитая методы других людей, я наконец-то пришел к тому, что хотел ... но теперь я не могу понять, как обновить тег DIV вместо всей страницы, чтобы цикл for мог быть непрерывным при нажатии

код пока

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>*", "");
}

Может ли кто-нибудь указать мне правильное направление?