overwrite text when clicking on button multiple times.

Hello,

I have buttons ("+")(green) for different sections, when I click on one of these buttons, I open an input field and a textarea field. The data of both fields should be finally put into a database, with foreign key of each section.

Link: http://science-travel-com.stackstaging.com/cpicks/

I show the section text in the label of the headline field, so that the user knows to which sections the new input data belongs to.

This works well, however with every click on a "+"-Button a new text is added, but the old text not removed. How can I remove the old text and add the new one?

Here is the function:

      

$('.plus').on('click',function(e){
        
        $('.newCP').show();
        $('.sectionInput').hide();
         $('.updateCP').hide();  
          e.stopPropagation();
       
        $('.labelTextareas').show();
        $('.myTextareas').show();
    
        newCpId = $(this).parent(this).attr('id');
        

     //HERE THE SECTION TEXT IS ADDED, HOWEVER CANNOT BE 
     // OVERWRITTEN WHEN "+" BUTTON IS ACTIVATED AGAIN
       $('label.headlineNewCp').before('&nbsp;for&nbsp;<b>' + $(this).siblings('span').text() + '</b>,&nbsp;');
            

        });
      
       $('#newCP').on('click', function() {
          
           $.ajax({
          //....for db                
             }
         });
          
       }); 

Code (JavaScript):

Thanks, guys!

 

I thought about empty():

$('label.headlineNewCp').empty().before('&nbsp;for&nbsp;<b>' + $(this).siblings('span').text() + '</b>,&nbsp;');

Code (JavaScript):

However, this does only remove the text, that has not been generated by the anonymous function. (The text that has been there before.)

 

G.. d...., sorry

it's:

$('label.headlineNewCp').html(str);

Code (JavaScript):