Using JQuery to replace tags within an array?

I am new to Javascript and JQuery and I am trying to replace all my tags with upon first click, and then replace with on the second click, and so forth.

Basically just cycling through them so on each click I have a 3d rendered box or sphere. I tried to run it with this code however it does not work.

When I checked the console, only the lines were getting logged, so it doesn't seem to be replacing them correctly. I need to keep the tags within each preserved as I work.

var counter = 0;
    var myArr = ["a-sphere", "a-box"];

    $("#targeted").click(function() {
        if(counter == myArr.length) counter = 0;
        $(myArr[counter]).replaceWith(function() {
            var myString = "<" + myArr[counter] + ">" + $(this).html() + "</" + myArr[counter] + ">";
            console.log(myString + counter);
            return myString;
        });
        counter++;
    });