Как создать свой div для каждого элемента?

var rombs = $('.rombs [class^="romb"]'); 
var rombsNum = rombs.length; 
 
$.each(rombs, function(index, val) { 
  $(this).html('<div></div>'); 
}); 
     
alert('Кол-во: ' + rombsNum);

.rombs > div { 
  width:50px; 
  height:50px; 
  float:left; 
  margin: 10px; 
  background: red; 
} 
.rombs div div { 
  width:30px; 
  height:30px; 
  margin:10px; 
  background:green; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="rombs"> 
    <div class="romb1"></div> 
    <div class="romb2"></div> 
    <div class="romb3"></div> 
    <div class="romb4"></div> 
    <div class="romb5"></div> 
</div>