Form value submitted at the number of times I clicked on a user – Jquery

This form value is submitted at the number of times a click on the user is performed.
What I want to do is submit the value to the clicked user, not to the number of times I clicked on a user or various users.

You can run the code here, to see what exactly I’m talking about, you will see the result at the console.

Thanks

https://jsfiddle.net/sambello/75uysd4c/53/

<form>
 <p><strong>USER LIST</strong></p>
 <div class="form-group boxed">
   <div class="input-wrapper">
     <input type="text" id="message" name="message" class="form-control" placeholder="Type a message...">
     <i class="clear-input">
       <ion-icon name="close-circle"></ion-icon>
     </i>
   </div>
</div>
  <button type="button" id="submit" class="btn btn-icon btn-primary rounded">
    <ion-icon name="send">Send</ion-icon>
  </button>
  
</form>

let users = document.querySelectorAll('.users');
users.forEach(user => {
    user.addEventListener('click', function() {
     
     let query_id = $(this).data("id");
     let query_username = $(this).data("username");
   
    
     let btn_submit = document.querySelector('#submit');
            btn_submit.addEventListener('click', function() {
                        
            let chat_message = document.getElementById("message").value;
            
            //This value below will display/submit at the number of time you click on the users.
            console.log(query_id);
            console.log(query_username);
            console.log(chat_message)
                
                        // Ajax Goes Below
            
                });
  
  });
    
});