htaccess Rewrite causing issues with form data when file is more than one level deep

Question

I have been trying to learn htaccess to create user friendly urls. I have the urls working fine but my contact forms that are one php pages more than a level deep eg at http://www.example.com/category/item-1/ are not passing the form data to the mail recipient - forms at http://www.example.com/contact/ pass the data just fine.

I am guessing that perhaps part of the javascript where it calls the php (url: "/php/form-process.php",) is being rewritten by my amateur htaccess and so causing an issue?

If someone can give some pointers as to the best way to allow the data to pass it would be much appreciated as I am very much a beginner with htaccess!

I thought I may have found the answer here (Seems like POST values are lost when .htaccess RewriteRule used. GET values are OK. How to fix?) but adding the solution to my htaccess does not seem to solve the issue.

this is my htaccess at in the root directory:

Options +MultiViews
RewriteEngine On

# To externally redirect /dir/foo.php to /dir/foo
RewriteCond %{THE_REQUEST} ^[A-Z]{3,}\s([^.]+)\.php [NC]
RewriteRule ^ %1/ [R=307,L]

# To internally forward /dir/foo to /dir/foo.php
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}.php -f
RewriteRule ^(.*?)/?$ $1.php [L,R=307]

RewriteCond %{HTTP_HOST} !^www.example.com$ [NC]
RewriteRule ^(.*)$ http://www.example.com/$1 [L,R=307]

#configure 404
ErrorDocument 404 /404.php

#forward .es to .com
RewriteCond %{HTTP_HOST} ^example\.es$ [OR]
RewriteCond %{HTTP_HOST} ^www\.example\.es$
RewriteRule ^/?$ "http\:\/\/www\.example\.com\/es\/" [R=307,L]

this is my php form code at "http://www.example.com/category/item-1/":

<form role="form" id="contactForm" data-toggle="validator" class="shake">
<div class="form-group">
<div class="controls">
<input type="hidden" id="reference" value="<?php echo htmlencode($propertyRecord['reference']) ?>" >
</div>
</div>
<div class="form-group">
<div class="controls">
<input type="text" id="name" placeholder="Name (required)" required data-error="Please enter your name">
<div class="help-block with-errors"></div>
</div>
</div>

<div class="form-group">
<div class="controls">
<input type="email" class="email" id="email" placeholder="Email (required)" required data-error="Please enter your email">
<div class="help-block with-errors"></div>
</div>
</div>

<div class="form-group">
<div class="controls">
<input type="text" id="msg_subject" placeholder="Phone (optional)">
<div class="help-block with-errors"></div>
</div>
</div>

<div class="form-group">
<div class="controls">
<textarea id="message" rows="7" placeholder="Message (required)" required data-error="Please enter your message message"></textarea>
<div class="help-block with-errors"></div>
</div>  
</div>

<button type="submit" id="submit" class="btn-system btn-small">Send</button>
<div id="msgSubmit" class="h3 text-center hidden"></div> 
<div class="clearfix"></div>   

</form>

<script type="text/javascript" src="/js/contact-form-script.js"></script>

this is the javascript file at "/js/contact-form-script.js":

$("#contactForm").validator().on("submit", function (event) {
    if (event.isDefaultPrevented()) {
        // handle the invalid form...
        formError();
        submitMSG(false, "Did you fill in the form properly?");
    } else {
        // everything looks good!
        event.preventDefault();
        submitForm();
    }
});


function submitForm(){
    // Initiate Variables With Form Content
    var name = $("#name").val();
    var email = $("#email").val();
    var msg_subject = $("#msg_subject").val();
    var message = $("#message").val();
    var reference = $("#reference").val();


    $.ajax({
        type: "POST",
        url: "/php/form-process.php",
        data: "name=" + name + "&email=" + email + "&msg_subject=" + msg_subject + "&message=" + message + "&reference=" + reference,
        success : function(text){
            if (text == "success"){
                formSuccess();
            } else {
                formError();
                submitMSG(false,text);
            }
        }
    });
}

function formSuccess(){
    $("#contactForm")[0].reset();
    submitMSG(true, "- Message Sent -")
}

function formError(){
    $("#contactForm").removeClass().addClass('shake animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
        $(this).removeClass();
    });
}

function submitMSG(valid, msg){
    if(valid){
        var msgClasses = "h4 text-center fadeIn animated text-success";
    } else {
        var msgClasses = "h4 text-center text-danger";
    }
    $("#msgSubmit").removeClass().addClass(msgClasses).text(msg);
}

this is the php file "/php/form-process.php":

<?php

$errorMSG = "";

$EmailTo = "me@example.com";
$Subject = "Website Enquiry // Ref: $reference // From $name - $email";

// prepare email body text
$Body = "";
$Body .= "Reference: ";
$Body .= $reference;
$Body .= "\n";
$Body .= "Name: ";
$Body .= iconv('utf-8', 'iso-8859-1', $name);
$Body .= "\n";
$Body .= "Email: ";
$Body .= $email;
$Body .= "\n";
$Body .= "Phone: ";
$Body .= $msg_subject;
$Body .= "\n";
$Body .= "Message: ";
$Body .= iconv('utf-8', 'iso-8859-1', $message);
$Body .= "\n";


// send email
$success = mail($EmailTo, $Subject, $Body, "From:".$email);

// redirect to success page
if ($success && $errorMSG == ""){
   echo "success";
}else{
    if($errorMSG == ""){
        echo "Something went wrong :(";
    } else {
        echo $errorMSG;
    }
}

?>

Many thanks in advance for the help!