Adamhumbug

foreach ($data as $cards) { $cards = json_decode($data['cards'], true); $count = sizeof($cards); $out = ''; if ($count == 4) { $size = "col-xl-3 col-md-6"; } else if ($count == 3) { $size = "col-xl-4 col-md-4"; } else if ($count == 2) { $size = "col-xl-6 col-md-6"; } else if ($count == 1) { $size = "col-12"; } foreach ($cards as $cardName => $cardDetails) { $icon_code = $icons[$cardDetails['Icon']]; $out .= "<div class='$size mb-3'> <div class='card editHeroCard' data-card='$cardName'> <div class='card-body'> <div class='text-center card-title'> <i class='$icon_code fa-2xl'></i> </div> <div class='card-text text-center my-3 fw-bold'>$cardDetails[Name]</div> <div class='card-text text-center'>$cardDetails[Paragraph]</div> </div> </div> <div class='handle text-center'>GRAB</div> </div>"; }  

moving it above the for each does work - thank you x1000 for this.  I dont think i would have ever got to this.
This is the complete working function:
function getHeroCardsByPortalId($pdo) { $res = $pdo->query("SELECT code, id FROM icon"); $icons = array_column($res->fetchAll(), 'code', 'id'); //avoiding the need to join the tables $sql = "SELECT json_extract(portal_content_json, '$.\"Portal Content\".\"Pages\".\"Home\".\"Hero\".\"Hero Cards\"') as cards FROM portal_content where portal_attachment_id = :portalId"; $stmt = $pdo->prepare($sql); $stmt->execute([ ':portalId' => $_GET['portalId'] ]); $data = $stmt->fetch(); if (!$data) { return "<div class='col-12'>No hero cards available!</div>"; } foreach ($data as $cards => $row) { $cards = json_decode($row, true); $count = sizeof($cards); $out = ''; if ($count == 4) { $size = "col-xl-3 col-md-6"; } else if ($count == 3) { $size = "col-xl-4 col-md-4"; } else if ($count == 2) { $size = "col-xl-6 col-md-6"; } else if ($count == 1) { $size = "col-12"; } usort($cards, fn ($a, $b) => $a['Order'] <=> $b['Order']); foreach ($cards as $card) { $icon_code = $icons[$card['Icon']]; $out .= "<div class='$size mb-3'> <div class='card editHeroCard' data-order-number='$card[Order]'> <div class='card-body'> <div class='text-center card-title'> <i class='$icon_code fa-2xl'></i> </div> <div class='card-text text-center my-3 fw-bold'>$card[Name]</div> <div class='card-text text-center'>$card[Paragraph]</div> </div> </div> <div class='handle text-center'>GRAB</div> </div>"; } } return $out; }  

turn out the show modal needed to be in the success of the ajax - makes perfect sense..
function generateFormModal($formId) { console.log($formId) $.ajax({ type: 'post', data: { 'ajax': 'generateFormModal', 'formId': $formId }, success: function(resp) { $('#createNewFormModal').html(resp) $('#createNewFormModal').modal('show') } }) }  

I knew i was close:
UPDATE quote_items qi inner join items i on qi.item_id = i.id set qi.discounted_price = qi.amount_charged_each * .5, qi.discount_percentage = .5 where qi.quote_id = 89 and i.discountable = 1  

fixed with
".selectAllItemsBySection()." Thanks Barry for that pointer.

In the end i created a script that did what i wanted.
$('.section').each(function() { var $el = $(this); var bottom = $el.position().top + $el.outerHeight(true); if (bottom > 950) { $('#pageContent2').append($el) } }) It grabs any element that appears below the page end and moved it into the next page.
 
I am very sure this is a hack and not the cleanest solution, but it does do what i need.
 
As always, i am greatful for your feedback and pointers.

HI Both,
Thanks for your info here - before seeing your replies, i wrote the following which seems to do what i want but as you said, it copies all of the content with it.
I will have a look at cleaning this up and will post the new version once finalized.
i=0; function myF() { console.log(i) var chunk = document.getElementById('newMenuItemLine'+i); var clone = chunk.cloneNode(true); i++; chunk.setAttribute("id", "newMenuItemLine" +i); document.getElementById('wrapper').appendChild(clone); }  

i went this route in the end and didnt bother with data attributes.
function getMoreNews(limit, offset){ $.ajax({ type: 'post', data: {"ajax" : 'one', "offset" : offset, "limit" : limit}, success: function(resp){ offset = offset + 1 limit = limit + 1 $('.moreNews').append(resp + "<div class='btn btn-secondary w-100 text-center loadMoreNewsTrigger mb-3' onclick='getMoreNews(1,"+offset+");' data-limit='1' data-offset="+offset+">-- Load More News --</div>") } }) };  

Turns out that i have solved this one myself also, the issue was that i was passing a string in the array and not integers.  When i changed the data type to 'is' rather than 'ii' the insert worked.

Turned out to be a miss-capitalised bit of data
createNewgame should have been createNewGame
Sorry all.
 
Thanks for looking anyway.

I am sorry all, as is always the case i have answered by own question shortly after posting.
function barCodeVal(e){ var code = e.keyCode; console.log(e.keyCode); } thanks anyway, i am sure i will be back.