在同一类的多个 div 中创建并附加一个跨度

<div data-component-id=\"nwv4kv9j5ct9\" class=\"component-inner-container status-red \" data-component-status=\"major_outage\" data-js-hook=\"\" id=\"nwv4kv9j5ct9\">

   <span class=\"name table-item-name\">JHP</span>
   <span class=\"service-tier table-item-tier\"><a href=\"\" target=\"_blank\" 
      onclick=\"event.stopPropagation()\">Tier 2</a></span>
 
   <span class=\"tooltip-base tool tooltipstered\" style=\"display: none;\">?</span>
 
   <span class=\"component-status table-item-status-childs\" title=\"\"><span class=\"app-status bg- 
      inactive\">failing</span></span>
 
   <span class=\"tool icon-indicator fa fa-times tooltipstered\"></span>
 
</div>
<div data-component-id=\"rtv4kv9j5cyu\" class=\"component-inner-container status-red \" data-component-status=\"major_outage\" data-js-hook=\"\" id=\"nwv4kv9j5ct9\">

   <span class=\"name table-item-name\">PHS</span>
   <span class=\"service-tier table-item-tier\"><a href=\"\" target=\"_blank\" 
       onclick=\"event.stopPropagation()\">Tier 2</a></span>
 
   <span class=\"tooltip-base tool tooltipstered\" style=\"display: none;\">?</span>
 
   <span class=\"component-status table-item-status-childs\" title=\"\"><span class=\"app-status bg-inactive\">degrading</span></span>
 
   <span class=\"tool icon-indicator fa fa-times tooltipstered\"></span>
 
</div>
......
......

I need to create and append a span tag <span class=\"type table-item-type\">Type</span> inside each div with class name component-inner-container. It should be after

$(\'.component-inner-container\').each(function () {
        var span = $(\'<span />\').attr(\'className\', \'type\')
        span.appendTo(\".component-inner-container\");

    });

I\'m stuck here and couldn\'t able to find right approach

Edit : added span should be after for example <span class=\"name table-item-name\">PHS</span>