안녕하세요 자바스크립트 질문드립니다!

JavaScript
1

안녕하세요 자바스크립트 질문 드립니다.
우선 체크인이랑 체크아웃 클릭해서 달력 띄운다음에 input.value 로 넣는 것까지는 했습니당
근데 제가 하려고 하는게 checkin날짜 checkout날짜 달력 나오게한 다음 그 value 값들로 밑에 li 태그 안에다가 바로 1박 2박 이런 식으로 계산되게 나타내고 싶은데요.
처음 화면에서 그 당일 날이랑 다음날 체크인 체크아웃에 띄워놓고
체크인 체크아웃 날짜가 달력통해서 바뀌면 바로 반영 되게 하려구 하는대 적용이 안되서요…
calender-a 이게 달력 안에 있는 클릭하면 바뀌게 되는 a태그 class인데 이렇게 하면 안되서요
어떻게 바꾸어야 할지 알려주시면 배우겠습니당

<ul>
    <li ><span>체크인</span></li>
    <li ><input type="text" id="check_in" style="width: 78px;"></li>
</ul>
<ul>
    <li >기간</li>
    <li  id="calculDate"></li>
</ul>
<ul>
    <li ><span>체크아웃</span></li>
    <li><input type="text" id="check_out" style="width: 78px;"></li>
</ul>

<script>

    document.getElementById('check_in').value = new Date().toISOString().substring(0, 10);
    document.getElementById('check_out').value =addDays().toISOString().substring(0, 10);

    function addDays(){
        var result = new Date();
        result.setDate(result.getDate()+1);
        return result;
    }
    
    function calculDay(){
        document.getElementById('check_in').value = new Date().toISOString().substring(0, 10);
    document.getElementById('check_out').value =addDays().toISOString().substring(0, 10);

        var ckday = document.getElementById('check_in');
        var coday = document.getElementById('check_out');
        var cald = document.getElementById('calculDate');
        
       
        var strDay1 = ckday.value;
        var strDay2 = coday.value;
        
        var arr1 = strDay1.split('-'); 
        var arr2 = strDay2.split('-'); 

        var dat1 = new Date(arr1[0], arr1[1], arr1[2]); 
        var dat2 = new Date(arr2[0], arr2[1], arr2[2]);
        var diff = dat2 - dat1; 
        var currDay = 24 * 60 * 60 * 1000;
        if(arr1[1]==2 & arr2[1]==3){
            cald.innerHTML=parseInt((diff/currDay)-2)+"박";   
        }else{
            cald.innerHTML=parseInt(diff/currDay)+"박";
        }
    
    }
    
   $(".calender-a").on("click",function(){
        var ckday = document.getElementById('check_in');
        var coday = document.getElementById('check_out');
        var cald1 = document.getElementById('calculDate');
        
       
        var strDay1 = ckday1.value;
        var strDay2 = coday1.value;
        
        var arr1 = strDay1.split('-'); 
        var arr2 = strDay2.split('-'); 

        var dat1 = new Date(arr1[0], arr1[1], arr1[2]); 
        var dat2 = new Date(arr2[0], arr2[1], arr2[2]);
        var diff = dat2 - dat1; 
        var currDay = 24 * 60 * 60 * 1000;
        if(arr1[1]==2 & arr2[1]==3){
            cald.innerHTML=parseInt((diff/currDay)-2)+"박";   
        }else{
            cald.innerHTML=parseInt(diff/currDay)+"박";
        }
    
   });
   

</script>

$(".calender-a").on(“click”,function(){ 이 부분을
$("# check_out ").on(“change”,function(){ 이렇게 바꾸어도 잘안되서요

2

그 캘린더 a태그라는게 어떻게 되어있는지 알 수가 없으니 이것만 가지곤 모르죠.