Q:

JS: Separatedly get value from textareas with same class

Lets say I have the following textareas
<textarea class='save'></textarea>
<textarea class='save'></textarea>
<textarea class='save'></textarea>

They all have the class 'save'. I want to write some jQuery/JavaScript that will get the text from within all the text areas with the 'save' class.
My code so far:
$('#getText').click(function(){
    var text = $('.save').text(); 
});

This will get ALL the text values and add them into the variable. However, I'd like to be able to iterate through each textarea first so I can edit it. My pseudo code would be like this:
On button 'click' -> Get first '.save', wrap it in <p></p>, then add a 
<h1>Title</h1>, append this to a variable/array.

I could then output it like this:
<h1>Text 1</h1>
<p>text from textarea 1</p>

<h1>Text 2</h1>
<p>text from textarea 2</p>

<h1>Text 3</h1>
<p>text from textarea 3</p>

Rinse and repeat for each '.save', any ideas?

A:

You can use jQuery each() to iterate over each element you get with $(".save")
Then you can do what you need with it. In my example below, I created an array with the titles and each iteration of the each() I get a new title, add it to the html string and then I concat the value from the textarea that I'm currently iterating over, wrapped in a <p> tag.

let titles = ["text 1", "text 2", "text 3"]
const result = $("#result")

$('#getText').click(function(){
    let html = ""
    var textAreas = $('.save')
    textAreas.each(function(idx) {    
      let txtAreaValue = this.value;
      let title = titles[idx];
      html += "<h2>" + title + "</h2>" 
      html += "<p>" + txtAreaValue + "</p>";
    })
    console.log(html);
    result.html(html);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class='save'></textarea>
<textarea class='save'></textarea>
<textarea class='save'></textarea>
<input type="button" value="get" id="getText"/>
<div id="result"></div>

