title: Why is my fetch request being sent multiple times?
body: <p>I am trying to make it possible to comment on the site. If I post the first comment, it posts fine. If posting the second one, fetch sends 2 requests and displays the same comment 2 times, the third comment 3 requests and displays 3 times, etc. What do I need to do for everything to work?</p>
  <p>js</p>
  <pre><code>function insertNewComment(data) {
      var ul = document.getElementById(&quot;new-comment&quot;);
      ul.insertAdjacentHTML('afterBegin', '&lt;li class=&quot;list-group-item&quot;&gt;' + data.text + '&lt;/li&gt;');
  }
  
  
  function sendComment() {
      document.getElementById('comment').addEventListener('submit', (e) =&gt; {
          e.preventDefault();
          const formData = new FormData(e.target);
          fetch(e.target.getAttribute('action'), {
              method: e.target.getAttribute('method'),
              body: formData
          })
          .then((response) =&gt; {
              return response.json();
          })
          .then((data) =&gt; {
              insertNewComment(data);
              document.getElementById('comment').reset();
          });
      });
  }
  
  </code></pre>
  <p>html</p>
  <pre><code>{% extends 'base.html' %}
  
  {% block other_resources %}
      &lt;link rel=&quot;stylesheet&quot; href=&quot;{{ url_for('.static', filename='css/post.css') }}&quot;&gt;
      &lt;script src=&quot;{{ url_for('.static', filename='js/post.js') }}&quot;&gt;&lt;/script&gt;
  {% endblock %}
  
  {% block content %}
      &lt;div class=&quot;card&quot;&gt;
        &lt;img src=&quot;{{ post.photo_path }}&quot; class=&quot;card-img-top&quot; alt=&quot;...&quot;&gt;
        &lt;div class=&quot;card-body&quot;&gt;
          &lt;h5 class=&quot;card-title&quot;&gt;{{ post.title }}&lt;/h5&gt;
          &lt;p class=&quot;card-text&quot;&gt;{{ post.text }}&lt;/p&gt;
          &lt;p class=&quot;card-text&quot;&gt;&lt;small class=&quot;text-muted&quot;&gt;{{ post.created }}&lt;/small&gt;&lt;/p&gt;
        &lt;div class=&quot;card-header&quot;&gt;
            Написать комментарий:
        &lt;/div&gt;
  
          &lt;div&gt;
              &lt;form action=&quot;{{ url_for('news.add_comment', post_id=post.id) }}&quot; id='comment' method=&quot;POST&quot;&gt;
                {{form.csrf_token}}
                &lt;div class=&quot;form-floating&quot;&gt;
                  {{form.text(class='form-control')}}
                  {{form.text.label(for=&quot;floatingTextarea2&quot;)}}
                &lt;/div&gt;
                {{form.submit(class=&quot;btn btn-dark send-comment&quot;, onclick='sendComment()')}}
                &lt;div class=&quot;form-floating&quot;&gt;
                  &lt;label for=&quot;floatingTextarea2&quot;&gt;Комментарий&lt;/label&gt;
                &lt;/div&gt;
              &lt;/form&gt;
            &lt;/div&gt;
            &lt;div class=&quot;card comments&quot;&gt;
            &lt;div class=&quot;card-header&quot;&gt;
              Комментарии:
            &lt;/div&gt;
            &lt;ul class=&quot;list-group list-group-flush&quot; id='new-comment'&gt;
              {% for c in comments %}
                 &lt;li class=&quot;list-group-item&quot;&gt;{{ c.text }}&lt;/li&gt;
              {% endfor %}
            &lt;/ul&gt;
          &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  {% endblock %}
  
  </code></pre>