JSFiddle - React, Tailwind, and code Playground

HTML

<p class="saveContent"><a href='#'>save</a></p>
<div class='editable'><p class='Heading'>Some text</p><p class='Character'>Some text</p><p class='Heading'>Some text</p></div>
<div class='editable'><p class='Heading'>Some text</p><p class='Character'>Some text</p><p class='Heading'>Some text</p></div>

JavaScript

$('.saveContent').click(function(event){ 
    event.preventDefault();
        var content={};
        var paragraphs={};        
        var i=0;        
        $('.editable p').each(function(){
            var type=$(this).attr('class');
            var text=$(this).html();
            content[type]=text;            
            paragraphs[i]=content;
            i++;
        })
        for (i=0;i<paragraphs.count;i++){  
          for( s in content){
                alert (s);
            }            
        }
        
});