Ordering "Addtional fields" on checkout.tpl?

[-M-]

Hi everyone!

Okay, I am redoing our WHMCS template and it's going pretty well so far (though time consuming). I am now redoing the "last" page of the order forms called checkout.tpl.
I have about 7 additional fields I have created before, so far everything is perfect and they are displayed in the browsers...

...however they are all "dumped" in the same location/area. However I want "additional fields" 1, 2 and 5 on a different location (more at the top).
Additional fields 3 and 7 should be somewhere in the middle and fields 4 and 6 should be displayed all at the bottom after all the other (regular) fields.

I guess it's possible, but how do I do it? I did fool around with one field, however the result is kinda lacking and I have no idea if it's a solid solution.

My example (this one is displaying the birthday field I create in WHMCS):

                        {if $customfields}
                            {foreach $customfields as $customfield}
                        
                            {if $customfield.textid eq "birthdate"}                        
                                        <div class="col-sm-4">
                                            <div class="form-group prepend-icon">
                                                <label for="customfield{$customfield.id}" class="field-icon">
                                                    <i class="fas fa-calendar-alt"></i>
                                                    {$customfield.name}
                                                </label>
                                                {$customfield.input}
                                                {if $customfield.description}
                                                    <span class="field-help-text">
                                                        {$customfield.description}
                                                    </span>
                                                {/if}
                                            </div>
                                        </div>
                            {/if}
                            {/foreach}
                        {/if}

Now this actually does display the "birthdate"-field in the desired location, however:

1. The entered information in the field is being displayed "underneath" the icon (fa-calendar-alt)
2. Placeholder can not be used in the above case, as it's in pre-coded in the variable: "$customfield.input"
3. I don't think it's correct to use that same piece of code over and over for all the fields to be displayed, right?

Extra information;  the "birthdate"-field has id "customfield95" and name "customfield[95]", maybe that helps?
I also took a screenshot and included it (ignore the styling please; I am testing it).

I hope someone can provide some help with this. I guess it should be possible, given what I did so far.

Thanks in advance!