Angehängtes Element bleibt nicht im übergeordneten Element

Question

Wenn in der following code ein Eingang das Fehlersymbol aufweist, wird das zuvor im anderen Eingang angehängte Fehlersymbol entfernt. Warum ist das und wie kann ich das beheben?

<div class="reg-input"> 
    <input type="text" name="first-name" placeholder="First name"> 
</div> 
<div class="reg-input"> 
    <input type="text" name="last-name" placeholder="Last name"> 
</div> 

var $errorIcon = $('<i class="error">!</i>'); 
var $regInput = $('.reg-input input'); 
$regInput.on('focus', function() { 
    var $inputWrapper = $(this).parent(); 
    if ($inputWrapper.has('i').length === 0) { 
     $inputWrapper.append($errorIcon); 
    } 
}); 

.error { 
    color: #fff; 
    border: 1px solid brown; 
    background: brown; 
    border-radius: 100%; 
    position: absolute; 
    right: 5px; 
    top: 50%; 
    transform: translateY(-50%); 
} 

.reg-input { 
    position: relative; 
} 

.reg-input input{ 
    width: 100%; 
} 
    } 

Answer 1

weil das gleiche Element zu einem anderen Ort bewegt wird, müssen Sie vor klonen anhängt:

$inputWrapper.append($errorIcon.clone()); 

Update Fiddle

Answer 2

Da Sie das gleiche Element angehängt sind es an den neuen Ort verschieben, Verschieben Sie die Elementdeklaration in den Block if k Erstellen Sie ein neues Element und hängen Sie an.

$inputWrapper.append('<i class="error">!</i>'); 

DEMO