JQUERY - Find all Elements with Class="X" and then POST all those elements to the server to INS into the DB

Question

Given a large text block from a WYSIWYG like:

Lorem ipsum dolor sit amet, <span class="X" id="12">consectetur adipiscing elit</span>. Donec interdum, neque at posuere scelerisque, justo tortor tempus diam, eu hendrerit libero velit sed magna. Morbi laoreet <span class="X" id="13">tincidunt quam in facilisis.</span> Cras lacinia turpis viverra lacus <span class="X" id="14">egestas elementum. Curabitur sed diam ipsum.</span>

How can I use JQUERY to find the following:

<span class="X" id="12">consectetur adipiscing elit</span>
<span class="X" id="13">tincidunt quam in facilisis.</span>
<span class="X" id="14">egestas elementum. Curabitur sed diam ipsum.</span>

And post it to the server as follows

12, consectetur adipiscing
13, tincidunt quam in facilisis.
14, egestas elementum. Curabitur sed diam ipsum.

In a way where in Coldfusion it can loop through the results and make 3 inserts into the DB?

Thanks

Answer 1

var postText = "";
$( "span.X" ).each( function() {
     postText += "\n" + $( this ).attr( "id" ) + ", " + $( this ).text();
} );

$.ajax( { 
   url: "path/to/script",
   type: "POST",
   data: "postText=" + postText,
   success: function( response ) {
      // request has finished at this point.
   }
} );