ajax form submit without refresh error

I have a form in AJAX working, but when i have more than one form on the same page appears an error.

    <script>
  var fmx = jQuery.noConflict();
    fmx(document).ready(function(){
    fmx('form').on('submit', function (e) {
      e.preventDefault();
      fmx.ajax({
        type: 'post',
        url: 'https://www.webshop.com/post.php',
        data: fmx('form').serialize(),
        success: function () {
           document.getElementById('#form_post').style.display = 'none';
           document.getElementById('#form_result').style.display = '';
        }
      });
    });
  });
</script>
<div id="#form_post" style="display:inherit">
<form class="form_post">
    <label for="post_email">FORM</label>
    <input id="post_email" class="post_email" type="email" name="post_email" placeholder="your@email.com" required>
    <input id="post_data" class="post_data" type="text" name="post_data" placeholder="MSG" required>
    <input name="submit" type="submit" value="POST" >
</form>
</div>
<div id="#form_result" style="display:none"><br>Success.</div>

I tried to switch to a #id but it stopped working.

    <script>
  var fmx = jQuery.noConflict();
    fmx(document).ready(function(){
    fmx('#form').on('submit', function (e) {
      e.preventDefault();
      fmx.ajax({
        type: 'post',
        url: 'https://www.webshop.com/post.php',
        data: fmx('#form').serialize(),
        success: function () {
           document.getElementById('#form_post').style.display = 'none';
           document.getElementById('#form_result').style.display = '';
        }
      });
    });
  });
</script>
<form class="form_post" id="form">

How do put an ID on this form?