I have multiple divs in my htmlthat needs to have an element added between the div and p

```
<div class="ui-state-error ui-corner-all">
 <p><b>Reversed</b></p>
</div>

```

what i want is the html to add the a span between the two

```
<div class="ui-state-error ui-corner-all">
<span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>
 <p><b>Reversed</b></p>
</div>

```

But the functions ive tried have not been able to do this for each class once, if there are 13 classes, the function puts 13 s on each of the 13 classes, regardless if i just use a selector or an each(), insertBefore(), before(), after(), ect

here is what ive tried that hasnt worked

```
 <script type="text/javascript">        
       $(function () {                 
html = '<span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>';

           $('.ui-state-error').each(function(i){
                $('.ui-state-error').eq(i).before('p').append(html);
            });
        });
    </script>

```