Q:

How to define function and bind them to event in jQuery

When I try to nest functions and bind them to event,I met some problems. 
I definedoutpatient1 and outpatient2,and they are nested to outpatient
When I click each cells, it seems $(this) seems not to be captured. 
How can I fix them? 
Where are there any reason? 
Thanks

let style = "style1"
$('.click_btn').on('click', function(e) {
  e.preventDefault();
  style = $(this).data().style;
  console.log(style)
});
function outpatient1() {
  console.log("#1")
  let clickedID = $(this).attr('id');
  console.log("clickedID", clickedID);
  $(this).removeClass().addClass(style);
}
function outpatient2() {
  console.log("#2")
  $(this).nextAll(':lt(3)').addClass(style);
}
function outpatient() {
  if (style == "style1") {
    outpatient1()
  } else {
    outpatient2()
  }
}
function hover() {
  $(this).addClass('style3');
}
$("#calendar .day").on({
  mouseover: hover,
  /* mouseover or mouseenter for hover */
  click: outpatient
});
td {
  padding: 10px;
  border: solid black 1px;
}

table {
  border-collapse: collapse;
}

.is-clicked {
  background-color: aqua;
}

.style1 {
  background-color: red;
}

.style2 {
  background-color: aqua;
}

.style3 {
  background-color: yellow;
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<div id=calendar>
  <table>
    <tr>
      <td id=1 class=day>1</td>
      <td id=2 class=day>2</td>
      <td id=3 class=day>3</td>
      <td id=4 class=day>4</td>
      <td id=5 class=day>5</td>
      <td id=6 class=day>6</td>
      <td id=7 class=day>7</td>
    </tr>
  </table>
</div>
<button class="click_btn" data-style="style1">style1</button>
<button class="click_btn" data-style="style2">style2</button>

A:

$(this) is not passed to the function you are calling 
Here I pass the event from which you can take the target
Alternatively "bind" this using function.call(this) like outpatient1.call(this)
it has same result

let style = "style1"
$('.click_btn').on('click', function(e) {
  e.preventDefault();
  style = $(this).data().style;
  console.log(style)
});
function outpatient1(e) {
  console.log("#1",e.target)
  let clickedID = $(e.target).attr('id');
  console.log("clickedID", clickedID);
  $(e.target).removeClass().addClass(style);
}
function outpatient2(e) {
  console.log("#2")
  let clickedID = $(e.target).attr('id');
  console.log("clickedID", clickedID);
  
  $(e.target).nextAll(':lt(3)').addClass(style);
}
function outpatient(e) {
  if (style == "style1") {
    outpatient1(e)
  } else {
    outpatient2(e)
  }
}
function hover() {
  $(this).addClass('style3');
}
$("#calendar .day").on({
  mouseover: hover,
  /* mouseover or mouseenter for hover */
  click: outpatient
});
td {
  padding: 10px;
  border: solid black 1px;
}

table {
  border-collapse: collapse;
}

.is-clicked {
  background-color: aqua;
}

.style1 {
  background-color: red;
}

.style2 {
  background-color: aqua;
}

.style3 {
  background-color: yellow;
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<div id=calendar>
  <table>
    <tr>
      <td id=1 class=day>1</td>
      <td id=2 class=day>2</td>
      <td id=3 class=day>3</td>
      <td id=4 class=day>4</td>
      <td id=5 class=day>5</td>
      <td id=6 class=day>6</td>
      <td id=7 class=day>7</td>
    </tr>
  </table>
</div>
<button class="click_btn" data-style="style1">style1</button>
<button class="click_btn" data-style="style2">style2</button>

