Displaying Array on Frontend div wrap Issue

I have an interesting question

So i have an array build up of inputs like 10.

i need to display it on my front end correctly

here is the test sample frontend -

 <div id = "mobile-user-details" class="user-details__user-data border-top border-bottom p-4">
                      <div class="row">
                        <div class="col w-50">
                          <span>Mobile</span>
                          <span><?=$v_item['CONTACT_PHONE'];?></span>
                        </div>
                        <div class="col w-50">
                          <span>Landline</span>
                          <span><?=$v_item['CONTACT_LANDLINE'];?></span>
                        </div>
                      </div>
                        <div class="row">
                            <div class="col w-50">
                              <span>Email</span>
                              <span><?=$v_item['CONTACT_EMAIL'];?></span>
                            </div>
                            <div class="col w-50">
                              <span>Email</span>
                              <span><?=$v_item['CONTACT_EMAIL'];?></span>
                            </div>
                        </div>
                    </div>

Open in new window


here what outcome

fontend outcome
So what im trying to do is generate this from an array. the issue is im not sure how i can add a new div row wrap after every 2 results.
Alex LordAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Alex LordAuthor Commented:
var editLeftDisplay = $('#left-contact-list').find('div').each(function(){
               $(this).removeClass('col-md-4').addClass('col w-50');
           });

Open in new window



this is how i solved my first problem

the 2nd is to wrap input parent div inside a row div but i need to wrap two input parent divs within a row div.
0
Alex LordAuthor Commented:
divs
So above is the results so far, what im doing to do wrap a row container onto every two divs.

for example . this is how i want it to structure like

<div class = "row"><div class = "col w-50"></div><div class = "col w-50"></div></div>
<div class = "row"><div class = "col w-50"></div><div class = "col w-50"></div></div>

Open in new window

0
Alex LordAuthor Commented:
var editLeftDisplay = $('#left-contact-list').find('div').each(function(){
               $(this).removeClass('col-md-4').addClass('col w-50 wrap');
                
               
              
                
           });
           
           $('.wrap').wrapAll('<div class="row">');

Open in new window



this is how far i am so far, i decided to add a class no other inputs have, and look for this and wrap them in a row, the only issue is it wrapping all into one now wrapping two of each
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Alex LordAuthor Commented:
new results

ok so i have added a unique number onto the wrap class so what im trying to do is wrap 0 , 1 together, 2,3 together and so on.
0
Chris StanyonWebDevCommented:
Hey Alex,

Not entirely sure what you're trying to do, but if you want to wrap the elements in a new div, 2 at a time, then you can try the slice method:

var divs = $('#left-contact-list').find('div');

for(var i = 0; i < divs.length; i+=2) {
    divs.slice(i, i+2).wrapAll("<div class='row'></div>");
}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
bugadaCommented:
you can automate it if you array is sorted. With a forEach loop and an external counter you can iterate the array elements and print row div opened and closed depending on the counter.
0
Alex LordAuthor Commented:
Thank you Chris

That exactly what i was looking for.

The reason been i have 3 list containers that list same inputs and i wanted to use same array but each 3 containers are styled differently one row is 3 by 3 and one is 2 by 2 and other just st8 down.
0
Chris StanyonWebDevCommented:
No worries Alex.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.