Pass PHP variable to JavaScript thru the DOM works, but can't pass that same variable back from JS to PHP

Question

UPDATE: problem solved... see answer below

Summary:
I'm having trouble passing a variable from one PHP routine to JavaScript and then passing that same variable from JavaScript to a different PHP routine. JavaScript gets the variable from the first PHP routine and can work with it in JavaScript, but it doesn't seem to have it when I try to send it to a second PHP routine. Checking both before and after sending to the second PHP routine show that JS has the variable, but the PHP routine just gets null.

Details:
I want to pass a variable from PHP to JavaScript, do some stuff in JavaScript, then pass from JavaScript to PHP a new variable and the original PHP variable. In other words:

1. Pass PHP variable --> JavaScript
2. JavaScript does stuff and gets a resulting variable
3. Pass JavaScript variable and PHP variable (from step 1) --> PHP

I pass the PHP variable to JavaScript by echoing the data into the page and use JavaScript to pull it from the DOM, an idea I found in the second suggestion in this great StackOverflow answer about passing variables from PHP to Javascript. Here's the code I'm using for this. There's no problem with it, it works great (or at least seems to?!).

<style>
#rp {display: none;}
</style>

<div id="rp">
<?php 
$output = "php variable being passed to JavaScript"; 
echo htmlspecialchars($output); 
?>
</div>

<script>
function getMyData(){
var div = document.getElementById("rp");
var myData = div.textContent;
return myData;}
</script>

The problem is that when I try to use JavaScript to pass the variable back to PHP, it's not there. I can use it in JavaScript, do things with it, print it, play with it, whatever I want... but it's not there if I try to send it back to PHP. The code I use to pass it back:

<script language="JavaScript" type="text/javascript">

var PHPVar = getMyData(); //function that gets PHP data from DOM
var jsResultVar = getJSVar(); //function that does JS stuff and returns a result

var hr;  
if (window.XMLHttpRequest) { 
    // Mozilla, Safari, ...  
    hr = new XMLHttpRequest(); 
} 
else if (window.ActiveXObject) { 
     // IE 8 and older  
   hr = new ActiveXObject("Microsoft.XMLHTTP");  
}  


var hr = new XMLHttpRequest();
var url = "parseData.php";
var vars = "javaScriptResult="+jsResultVar+"&PHPVar="+PHPVar;
hr.open("POST", url, true);

hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
hr.send(vars); 
</script>

In this code, the variable calculated by JavaScript, jsResultVar, gets sent from JavaScript to PHP with no problem.

If I hardcode PHPVar in the code above, e.g. "var PHPVar = 42", then the variable gets sent from JavaScript to the PHP routine with no problem.

But when I try to send the variable which PHP inserts for JavaScript to pull from the DOM, it doesn't get sent and sends a null instead. PHPVar definitely contains the variable in JavaScript; I've checked in simple ways by just writing it with JS onto the html page, and it's there both before and after trying to send to the PHP routine. But it just sends null to PHP.

What am I doing wrong?

PROBLEM SOLVED:
The suggestion of @vrijdenker was the right idea.

I played around with the line spacing of the code which PHP uses to send the variable to JavaScript. The code definitely works with the original line spacing in that JS can get the variable and use it... but the code can't be used as written to send that variable back from JS to a different PHP routine.

By changing the line spacing to put all of it on one line, JS is able to send the variable to the second PHP routine.

I actually pulled that code with the not-quite-working line spacing essentially verbatim from this great StackOverflow answer. I don't understand white-space issues well enough to suggest updating that answer, and I don't have the reputation points to put a comment on @SecondRikudo's answer, but if anyone is knowledgeable enough, it'd be helpful for the next person who hits this problem after using that code.

:)

Answer 1

So this is the part that was broken.

<div id="rp">
<?php 
$output = "php variable being passed to JavaScript"; 
echo htmlspecialchars($output); 
?>
</div>

Which could result in:

<div id="rp">
Some contents
</div>

OP is creating a variable out of it resulting in a variable like this:

var vars = "javaScriptResult=jsresult&PHPVar=\r\n
Some contents\r\n
";

(I placed the \r\n meaning a Windows linebreak. It may be just a \n if OP is on Linux for example).

In the comments above I suggested removing the linebreaks by moving the php tags, like this:

<div id="rp"><?php 
$output = "php variable being passed to JavaScript"; 
echo htmlspecialchars($output); 
?></div>

Which would make:

<div id="rp">Some contents</div>

And result in

var vars = "javaScriptResult=jsresult&PHPVar=Some contents";

Since this fixxes the problem, one must note that if the contents themselves contain line-breaks the same problem would occur. Because of that one might take a look at this post as well: Pass a PHP string to a JavaScript variable (and escape newlines)