polyglot/app/javascript/packs/translate.js

const userId = document.getElementById('current-user').innerText
const languageForm1 = document.getElementById('lang-1')
const languageForm2 = document.getElementById('lang-2')
const chatroomId = document.getElementById('chatroom-hook').dataset["chatroomId"]

languageForm1.addEventListener('submit', event => {
  event.preventDefault()
  const original = document.getElementById('language-1').value
  const target = document.getElementById('language-2').value
  const text = document.getElementById('language-1-input').value

  if (original !== target) {
    fetch(`/chat_rooms/${chatroomId}/translate` , {
      method: 'POST',
      body: JSON.stringify({
        original,
        target,
        text,
        input: 1,
        userId
      }),
      headers: { "content-type": "application/json", "X-CSRF-Token": document.querySelector('meta[name=csrf-token]').content }
    })
  } else {
    document.getElementById('language-2-input').value = text
  }
  // post request and change form 1
})

languageForm2.addEventListener('submit', event => {
  event.preventDefault()
  const original = document.getElementById('language-2').value
  const target = document.getElementById('language-1').value
  const text = document.getElementById('language-2-input').value
  // post request and change form 2
  if (original !== target) {
    fetch(`/chat_rooms/${chatroomId}/translate` , {
      method: 'POST',
      body: JSON.stringify({
        original: original,
        target: target,
        text: text,
        input: 2,
        userId
      }),
      headers: { "content-type": "application/json", "X-CSRF-Token": document.querySelector('meta[name=csrf-token]').content }
    })
  } else {
    document.getElementById('language-1-input').value = text
  }
})