reducing & optimising a jquery if statement

I'm having this code that I made, that is able to detect which number the user has typed in the column variable and is able to execute a specific code for the number he chose. The whole code is a website made of 4 columns, and when a user connect, he can choose his username and a column where his username is going to be displayed and actions recorded.

So if I type 2 in the second prompt, my username is going to be displayed in the second column.

Actually this code is made of

if (column === "1"){
//do things in .one
} if (column === "2"){
//do things in .two
}

So I have four times the same code for each column and it's not very convenient...

Since I'm pretty new to all this and that I'm pretty sure I'm not doing this right, I wanted to ask if there was a way to make this code more digest...

$(document).ready(function () {
      var username = prompt("USERNAME : ", "nom");
      var column = prompt("COLUMN : ", "1,2,3 ou 4");

      if (column === "1"){
        $(".one").append($("<p class='username'>"+ username +"</p>"))
        $(document.body).click(function (b) {

          var verbes = [
          "appuie",
          "bouscule",
          "pousse"
          ];

          var adverbes = [
          "puis",
          "ensuite",
          "pour finir",
          "alors"
          ];

          var verbe = verbes[Math.floor(Math.random()*verbes.length)];
          var adverbe = adverbes[Math.floor(Math.random()*adverbes.length)];
          var verbadv = verbe + " " + adverbe;
          console.log(verbadv);

          var div = $("<div />", {
            "class": "document"
          })
          .css({
            "left": b.pageX + 'px',
            "top": b.pageY + 'px'
          })
          .append($("<p>" + verbadv + "</p>"))
          .appendTo(".one");
        });
        $(document.body).contextmenu(function (rc) {
         var div = $("<div />", {
          "class": "document"})
         .css({
          "left": rc.pageX + 'px',
          "top": rc.pageY + 'px'})
         .append($("<p>recule</p>"))
         .appendTo(".one");
       });


        var direction = "";
        var oldx = 0;
        var oldy = 0;
        mousemovemethod = function (e) {

         if (e.pageX > oldx && e.pageY == oldy) {
          direction="gauche";
        }
        else if (e.pageX == oldx && e.pageY > oldy) {
          direction="bas";
        }
        else if (e.pageX == oldx && e.pageY < oldy) {
          direction="haut";
        }
        else if (e.pageX < oldx && e.pageY == oldy) {
          direction="droite";
        }

        $(".dir1").append($("<p class='direction' id='direction'>"+ direction +"</p>"))
        $(".direction").prev().remove();

        oldx = e.pageX;
        oldy = e.pageY;

      }
      document.addEventListener('mousemove', mousemovemethod);
    }

    if(column === "2"){
      $(".two").append($("<p class='username'>"+ username +"</p>"))
      $(document.body).click(function (e) {

        var verbes = [
        "appuie",
        "bouscule",
        "pousse"
        ];

        var adverbes = [
        "puis",
        "ensuite",
        "pour finir",
        "alors"
        ];

        var verbe = verbes[Math.floor(Math.random()*verbes.length)];
        var adverbe = adverbes[Math.floor(Math.random()*adverbes.length)];

        var div = $("<div />", {
          "class": "document"

        })
        .css({

          "left": e.pageX + 'px',
          "top": e.pageY + 'px'
        })
        .append($("<p>" + verbe + " " + adverbe + "</p>"))
        .appendTo(".two");
      });
      $(document.body).contextmenu(function (rc) {
       var div = $("<div />", {
        "class": "document"})
       .css({
        "left": rc.pageX + 'px',
        "top": rc.pageY + 'px'})
       .append($("<p>recule</p>"))
       .appendTo(".two");
     });

      var direction = "";
      var oldx = 0;
      var oldy = 0;

      mousemovemethod = function (e) {

       if (e.pageX > oldx && e.pageY == oldy) {
        direction="gauche";
      }
      else if (e.pageX == oldx && e.pageY > oldy) {
        direction="bas";
      }
      else if (e.pageX == oldx && e.pageY < oldy) {
        direction="haut";
      }
      else if (e.pageX < oldx && e.pageY == oldy) {
        direction="droite";
      }

      $(".dir2").append($("<p class='direction' id='direction'>"+ direction +"</p>"))
      $(".direction").prev().remove();

      oldx = e.pageX;
      oldy = e.pageY;

    }
    document.addEventListener('mousemove', mousemovemethod);
    
  }if(column === "3"){
    $(".three").append($("<p class='username'>"+ username +"</p>"))
    $(document.body).click(function (e) {

      var verbes = [
      "appuie",
      "bouscule",
      "pousse"
      ];

      var adverbes = [
      "puis",
      "ensuite",
      "pour finir",
      "alors"
      ];

      var verbe = verbes[Math.floor(Math.random()*verbes.length)];
      var adverbe = adverbes[Math.floor(Math.random()*adverbes.length)];

      var div = $("<div />", {
        "class": "document"

      })
      .css({

        "left": e.pageX + 'px',
        "top": e.pageY + 'px'
      })
      .append($("<p>" + verbe + " " + adverbe + "</p>"))
      .appendTo(".three");
    });
    $(document.body).contextmenu(function (rc) {
     var div = $("<div />", {
      "class": "document"})
     .css({
      "left": rc.pageX + 'px',
      "top": rc.pageY + 'px'})
     .append($("<p>recule</p>"))
     .appendTo(".three");
   });

    var direction = "";
    var oldx = 0;
    var oldy = 0;
    mousemovemethod = function (e) {

     if (e.pageX > oldx && e.pageY == oldy) {
      direction="gauche";
    }
    else if (e.pageX == oldx && e.pageY > oldy) {
      direction="bas";
    }
    else if (e.pageX == oldx && e.pageY < oldy) {
      direction="haut";
    }
    else if (e.pageX < oldx && e.pageY == oldy) {
      direction="droite";
    }

    $(".dir3").append($("<p class='direction' id='direction'>"+ direction +"</p>"))
    $(".direction").prev().remove();

    oldx = e.pageX;
    oldy = e.pageY;
    
  }
  document.addEventListener('mousemove', mousemovemethod);
}
if(column === "4"){
  $(".four").append($("<p class='username'>"+ username +"</p>"))
  $(document.body).click(function (e) {

    var verbes = [
    "appuie",
    "bouscule",
    "pousse"
    ];

    var adverbes = [
    "puis",
    "ensuite",
    "pour finir",
    "alors"
    ];

    var verbe = verbes[Math.floor(Math.random()*verbes.length)];
    var adverbe = adverbes[Math.floor(Math.random()*adverbes.length)];

    var div = $("<div />", {
      "class": "document"
    })
    .css({
      "left": e.pageX + 'px',
      "top": e.pageY + 'px'
    })
    .append($("<p>" + verbe + " " + adverbe + "</p>"))
    .appendTo(".four");
  });
  $(document.body).contextmenu(function (rc) {
   var div = $("<div />", {
    "class": "document"})
   .css({
   "left": rc.pageX + 'px',
    "top": rc.pageY + 'px'})
   .append($("<p>recule</p>"))
   .appendTo(".four");
 });

  var direction = "";
  var oldx = 0;
  var oldy = 0;
  mousemovemethod = function (e) {

   if (e.pageX > oldx && e.pageY == oldy) {
    direction="gauche";
  }
  else if (e.pageX == oldx && e.pageY > oldy) {
    direction="bas";
  }
  else if (e.pageX == oldx && e.pageY < oldy) {
    direction="haut";
  }
  else if (e.pageX < oldx && e.pageY == oldy) {
    direction="droite";
  }

  $(".dir4").append($("<p class='direction' id='direction'>"+ direction +"</p>"))
  $(".direction").prev().remove();

  oldx = e.pageX;
  oldy = e.pageY;

}
document.addEventListener('mousemove', mousemovemethod);

}

    });

body {
  font-family: sans-serif;
  font-size: 1.3rem;
  margin: 0;
  background-color: DarkSlateGray;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 5px;
  grid-auto-rows: minmax(100vh, auto);
  height: 100vh;
}

.one,
.two,
.three,
.four {
   -ms-overflow-style: none;  /* Internet Explorer 10+ */
  scrollbar-width: none;  /* Firefox */
  position: relative;
  overflow: scroll;
  height: 100%;
  background-color: tan;
}

.one {
  grid-column: 1 / 2;
}

.two {
  grid-column: 2 / 3;
}

.three {
  grid-column: 3 / 4;
}

.four {
  grid-column: 4 / 4;
}

.one::-webkit-scrollbar, 
.two::-webkit-scrollbar, 
.three::-webkit-scrollbar, 
.four::-webkit-scrollbar { 
  display: none;  /* Safari and Chrome */
}

.note {
  text-align: center;
  width: 100px;
  height: 30px;
}

.note p{
  filter: drop-shadow(0 0 0.75rem black);
}

.document{

  text-align: center;
}
.document p{
    padding: 0;
   margin: 0;
}

.username{
  text-align: center;
    padding: 0;
   margin: 0;
}

.direction{
  position: fixed;
  bottom : 0;
  width: 25vw;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="wrapper">
        <div class="one" id="gauche">    <div class="dir1"></div> </div>
        <div class="two" id="droite">    <div class="dir2"></div> </div>
        <div class="three" id="gauche2">    <div class="dir3"></div> </div>
        <div class="four" id="droite2">    <div class="dir4"></div> </div>
    </div>
    <div class ="texte"></div>
<div class="note" style="display: none;">*</div>  

</body>

    
</html>