追加された要素が親要素に残らない

Question

following codeでは、一方の入力にエラーアイコンがある場合、以前に他方の入力に追加されたエラーアイコンは削除されます。これはなぜですか、これをどうすれば解決できますか？

<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

同じ要素が他の場所に移動しますので、あなたは追加の前にクローンを作成する必要があります。

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

Update Fiddle

Answer 2

あなたは同じ要素を追加しているので、新しい場所に移動し、ifブロックの要素宣言を移動します。 k新しい要素を作成して追加します。 absolutly正しいザッツ

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

DEMO