I'm working on a card-based layout. Within each card there a details about the product. One of them is the phone number, written out as the actual number (ex. 555-555-5555).
What I'm trying to do is empty the text value, replace it with a material design icon, and move the element to another location within the card DOM.
Here's what I'm trying...
$('.phone').text('').append('<i class="material-icons">textsms</i>').appendTo(WHAT HERE?);
Your problem isn't in the appendTo, it's in the first
$('.phone'). That is selecting all elements with class=phone, not just the ones inside the specific li.card you're iterating on. So when the .each() gets to the very last li.card, it takes all the other phone elements and appends them to that last card.
To fix, just replace
and then, as you originally tried,
.appendTo($(this)) should work fine.