JQuery text fade in fade out

I would like to

replace word from "." to "first"
After 1 sec, replace word from "first" to "second"
After 1 sec, replace word from "second" to "first"
After 1 sec, replace word from "first" to "second"
After 1 sec, replace word from "second" to "first"
repeatedly continue the cycle

However my code does not work as what I expected. - Instead it appends the another word to previous word.

Could you please suggest how I approach this problem? Thank you. http://codepen.io/anon/pen/OyWpQq

    <h2 class="quotes"><span class="typeBg"><span class="type">.</span></span> 
<span class="details"><a href="#"><span class="detailsText">.</span></a></span> 
 <span class="CTA"><a href="#"><span class="CTAText">.</span></a></span></h2>

.quotes {height:45px !important;margin-top:-17.5px;margin-bottom:17.5px;border:1px solid #bec0c2;padding:10px 0px;}

.typeBg{height:44px;top:-10px;position:relative;padding:10px 15px;background-color:#004a65;color:white;width:140px;white-space: nowrap; text-overflow: ellipsis; overflow:hidden;display:inline-block;}

.type{display:none;}
.CTA,.details{border:1px solid #bec0c2;padding:10px 2px;top:-11px;position:relative;background-color:white;}    
.CTA{height:41px !important;width:138px;text-align:right;white-space: nowrap; text-overflow: ellipsis; overflow:hidden;display:inline-block;}
.details{height:40px !important; white-space: nowrap; text-overflow: ellipsis; overflow:hidden;width:736px;display:inline-block;}  

   showFirst();

   function showFirst() {

     $('<span/>').html("first").appendTo($(".detailsText"));
     $(".detailsText").fadeIn(500).delay(1000).fadeOut(500,showSecond);

   }

   function showSecond() {

     $('<span/>').html("second ").appendTo($(".detailsText"));
     $(".detailsText").fadeIn(500).delay(3000).fadeOut(500);

     showFirst();
   }

Solution

You are appending text rather replacing it. I could figure out a minimal solution to this like below

$(document).ready(function() {
    var counterText = ["First", "Second", "Third"];
    var counter = 0;    
    setInterval(change, 1000);
    function change() {
        $('.detailsText').html(counterText[counter]);
        counter++;
        if(counter >= counterText.length) { 
          counter = 0; 
        }
    }  
})

 
.quotes {height:45px !important;margin-top:-17.5px;margin-bottom:17.5px;border:1px solid #bec0c2;padding:10px 0px;}

.typeBg{height:44px;top:-10px;position:relative;padding:10px 15px;background-color:#004a65;color:white;width:140px;white-space: nowrap; text-overflow: ellipsis; overflow:hidden;display:inline-block;}

.type{display:none;}
.CTA,.details{border:1px solid #bec0c2;padding:10px 2px;top:-11px;position:relative;background-color:white;}    
.CTA{height:41px !important;width:138px;text-align:right;white-space: nowrap; text-overflow: ellipsis; overflow:hidden;display:inline-block;}
.details{height:40px !important; white-space: nowrap; text-overflow: ellipsis; overflow:hidden;width:736px;display:inline-block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<h2 class="quotes"><span class="typeBg"><span class="type">.</span></span> <span class="details"><a href="#"><span class="detailsText">.</span></a></span> <span class="CTA"><a href="#"><span class="CTAText">.</span></a></span></h2>

Checkout this http://codepen.io/anon/pen/zvNZMz