get a specific div class from div and based on that do a function

Question

the title might not explain my need well. Basically, beginning of the page, I have like 20 divs, each has id of cal001, cal002... to cal020.

Then at the end of page, I have a bunch of divs each have class like tocal001, or tocal002. Those divs might have different classes as well. Say I have a div with class tocal001, How can I make javascript recognize the specific class that start with tocal and clone().after() to the cal001 div?

Answer 1

To get the tocal... :

var tocal = $('[id^="tocal"]');

To append:

tocal.each(function(index, item){
     var $item = $(item);
     var id = item.id;
     var num = id.substr(id.length - 3, 3);
     $item.clone().insertAfter($('#cal' + num));
});

Here is a demo: http://jsfiddle.net/maniator/gRhCC/

Answer 2

$('[id^="tocal"]').each(function(){
    var tmpid = this.id.replace('to','');
    $(this).clone().insertAfter($('[id$="' + tmpid + '"]'));
    $(this).remove();
});

Demo: http://jsfiddle.net/AlienWebguy/4TK5d/

If you want to remove the duplicates and simply "shuffle" the rows:

$('[id^="tocal"]').each(function(){
    var tmpid = this.id.replace('to','');
    $(this).remove().insertAfter($('[id$="' + tmpid + '"]'));
});

Demo: http://jsfiddle.net/AlienWebguy/4TK5d/1/