jQuery loop HTML

<div class="container">

  		<span class="i_contact1" data-pos-x="175" data-pos-y="221"  data-pos-width="110" data-pos-height="64" ="spanid1"></span>
						
			<span class="o_contact1" data-pos-x="222" data-pos-y="201"  data-pos-width="93" data-pos-height="53" id="spanid1"> </span>
						
	<br>
	<div class="image_panel1" style="float:left; width:600px; position:relative;">
		<img alt="Un40eh5300inputs" src="http://s3.amazonaws.com/mymanual/images/images/000/000/005/large/UN40EH5300Inputs.jpg?1373419416" />
	<div class="i_tagmap1"></div>
	</div>

	<div class="image_panel1" style="float:left; width:600px; position:relative;">
		<img alt="Apple-appletv12-rear-lg" src="http://s3.amazonaws.com/mymanual/images/images/000/000/012/large/apple-appletv12-rear-lg.jpg?1373465902" />
	<div class="o_tagmap1"></div>
	</div>		
	
			<span class="i_contact2" data-pos-x="174" data-pos-y="150"  data-pos-width="110" data-pos-height="76" ="spanid2"></span>
						
			<span class="o_contact2" data-pos-x="393" data-pos-y="219"  data-pos-width="43" data-pos-height="25" id="spanid2"> </span>
						
	<br>
	<div class="image_panel2" style="float:left; width:600px; position:relative;">
		<img alt="Un40eh5300inputs" src="http://s3.amazonaws.com/mymanual/images/images/000/000/005/large/UN40EH5300Inputs.jpg?1373419416" />
	<div class="i_tagmap2"></div>
	</div>

	<div class="image_panel2" style="float:left; width:600px; position:relative;">
		<img alt="Xbox360_hdmi_203w_back" src="http://s3.amazonaws.com/mymanual/images/images/000/000/017/large/Xbox360_HDMI_203W_back.jpg?1373489559" />
	<div class="o_tagmap2"></div>
	</div>		
	

</div>

Ref: http://stackoverflow.com/questions/17800597/how-would-i-turn-these-functions-into-a-loop/17800679#17800679

Another version, which I may do

<div class="container">

    <div class="item">
        <span class="i_contact" data-pos-x="175" data-pos-y="221"  data-pos-width="110" data-pos-height="64" id="spanid1"></span>

        <span class="o_contact" data-pos-x="222" data-pos-y="201"  data-pos-width="93" data-pos-height="53" id="spanid1"> </span>

        <br/>
        <div class="image_panel" style="float:left; width:600px; position:relative;">
            <img alt="Un40eh5300inputs" src="http://s3.amazonaws.com/mymanual/images/images/000/000/005/large/UN40EH5300Inputs.jpg?1373419416" />
            <div class="i_tagmap"></div>
        </div>

        <div class="image_panel" style="float:left; width:600px; position:relative;">
            <img alt="Apple-appletv12-rear-lg" src="http://s3.amazonaws.com/mymanual/images/images/000/000/012/large/apple-appletv12-rear-lg.jpg?1373465902" />
            <div class="o_tagmap"></div>
        </div>  
    </div>

    <div class="item">
        <span class="i_contact" data-pos-x="174" data-pos-y="150"  data-pos-width="110" data-pos-height="76" id="spanid2"></span>

        <span class="o_contact" data-pos-x="393" data-pos-y="219"  data-pos-width="43" data-pos-height="25" id="spanid2"> </span>

        <br/>
        <div class="image_panel" style="float:left; width:600px; position:relative;">
            <img alt="Un40eh5300inputs" src="http://s3.amazonaws.com/mymanual/images/images/000/000/005/large/UN40EH5300Inputs.jpg?1373419416" />
            <div class="i_tagmap"></div>
        </div>

        <div class="image_panel" style="float:left; width:600px; position:relative;">
            <img alt="Xbox360_hdmi_203w_back" src="http://s3.amazonaws.com/mymanual/images/images/000/000/017/large/Xbox360_HDMI_203W_back.jpg?1373489559" />
            <div class="o_tagmap"></div>
        </div>      
    </div>

</div>

Then

$(document).ready(function(){

    $('span.i_contact').each(function() {                //needs to be .i_contact(x)
        var pos_width = $(this).data('pos-width');
        var pos_height = $(this).data('pos-height');
        var xpos = $(this).data('pos-x');
        var ypos = ($(this).data('pos-y')) + -125;
        console.log(ypos)
        var taggedNode = $('<div class="tagged" />')
        taggedNode.css({
            "border":"5px solid red",
            "width":pos_width,
            "height":pos_height,
            "left":xpos,
            "top":ypos
        });

        $(this).closest('.item').find('.i_tagmap').append(taggedNode) 
    });

    $("span.o_contact").each(function() {            //needs to be .o_contact(x)
        var pos_width = $(this).data('pos-width');
        var pos_height = $(this).data('pos-height');
        var xpos = $(this).data('pos-x');
        var ypos = $(this).data('pos-y');

        var taggedNode = $('<div class="tagged" />')
        taggedNode.css({
            "border":"5px solid red",
            "width":pos_width,
            "height":pos_height,
            "left":xpos,
            "top":ypos  
        });
        $(this).closest('.item').find('.o_tagmap').append(taggedNode) 
    });
});