Question

I want to use jQuery .append to insert a div into an another parent div which is part of a list element and consists of one dynamically created form field. Although the parent class contains only one object (i.e. text field) and exists only once within the whole document, .append adds the div six times. It works finde in JSfiddle but not on my local code (Magento form). Why is that? Could it be related to the dynamical creation of the parent class?

PHP

$input_name     = $this->getInputName();
$input_id       = $this->getInputId();
$input_value    = $this->getValue();
$input_class    = $this->getInputClass();
$label          = $this->getLabel();

<div class="input-box <?php echo $input_id;?>">
 <input type="text" name="<?php echo $input_name;?>" id="<?php echo $input_id;?>" value="<?php echo $this->htmlEscape($input_value) ?>" title="<?php echo $this->__($label); ?>" class="<?php echo $input_class;?>" />
</div>

with jQuery

$(".input-box.billing_postcode") .append("<div>My Link</div>")

always leads to the follwing HTML

<li>
<div class="input-box billing_postcode">
<input id="billing_postcode" class=" input-text required-entry absolute-advice " type="text" title="ZIP" value="" name="billing[postcode]">
<div>My Link</div>
<div>My Link</div>
<div>My Link</div>
<div>My Link</div>
<div>My Link</div>
<div>My Link</div>
</div>

Answer 1

This should fix:

var $element = $(".input-box.billing_postcode");
if($('.foo', $element).length == 0) {
    $element.append('<div class="foo">My Link</div>');
}