Moving Multiple Divs With Same Class Inside Parent

Question

So, My website is hosted on enjin.com and when you give users a tag with an image it appears on the forums under their name, however it's a vertical list with the tag names. I want to organize it so all of the tag images appear on one line and all of the tag names appear on a horizontal list below it.

They use div tags somewhat like this

<div class="tag">
    <div class="tag-image"></div> <!-- If the tag lacks an image this is excluded -->
    <div class="tag-text">Tag Name</div> <!-- If you want the name to be hidden this is excluded -->
</div>

They then pretty much repeat this for every tag. Somewhat the same thing is used for forum posts too.

So, I want to move all the tag-image divs together on a single line and all of the tag-text divs down and give each it's own line. I only want to move them within their parent element (to avoid images/tags from one forum user from going to another).

I know how to append things with jquery and have googled how to move elements around, but I'm afraid that they're all going to end up together under another user's avatar.

EDIT: Screenshot for more detail:

EDIT: I attempted this:

$('.tag-image').each(function(){
    $(this).parent().find('.cell').append($(this));
});

Nothing happened. I suspect that this script should be placed in the head tag to work, if it's what I need. I can't do that with my platform, but I'm working on a workaround as I've come across this issue before.

EDIT: Attempted this:

window.addEventListener('DOMContentLoaded', moveimgs, false);
    function moveimgs(){
        $('.tag-image').each(function(){
            $(this).parent().find('.cell').append($(this));
        });
}

Same result.

Answer 1

Im not sure what you are trying to do, but if it something like this, then you should use tables instead.

<table class="tag">
    <tr>
        <td><div class="tag-image">
            <img src="http://us.123rf.com/400wm/400/400/danomyte/danomyte0811/danomyte081100001/3807403-superhero-getting-ready-for-action.jpg" width="30px"/>
        </div></td>
        <td><div class="tag-text">Tag Name</div></td>
    </tr>


    <tr>
        <td><div class="tag-image">
            <img src="http://us.123rf.com/400wm/400/400/danomyte/danomyte0811/danomyte081100001/3807403-superhero-getting-ready-for-action.jpg" width="30px"/>
        </div></td>
        <td><div class="tag-text">Tag Name</div></td>
    </tr>

    <tr>
        <td><div class="tag-image">
            <img src="http://us.123rf.com/400wm/400/400/danomyte/danomyte0811/danomyte081100001/3807403-superhero-getting-ready-for-action.jpg" width="30px"/>
        </div></td>
        <td><div class="tag-text">Tag Name</div></td>
    </tr>
</table>

js fiddle