Jquery works in JSFiddle but not works in computer

Question

This is the answer I get from jsfiddle. It's working on the fiddle part, but it's not working when I move it to my computer. I replaced the code in my program and also included all of the external resource library. However, it's still not working at all.

var x = 1;

function appendRow() {
  var newTextBoxDiv = $(document.createElement('div'))
    .attr("id", 'TextBoxDiv' + x);
  // I ASSIGNED A CLASS CALLED INPUT TO THE ELEMENT YOU WANT TO SELECT
  newTextBoxDiv.after().html("<div class='form-group'><label class='control-label col-sm-3'  style='text-align:right;'>Date:</label><div class='col-sm-3'><div class='input-group date' ><span class='input-group-addon'><i class='fa fa-calendar'></i></span><input type='Date' class='form-control'  name='Dates'> <select class='form-control input' id='slct" + x + "' name='Branch''><option  disabled=''  selected=''>Please Select Leave Day</option> <option value='1' >1</option><option value='0.5' >0.5</option></select></div></span></div><div id='container" + x + "'></div></div>");
  newTextBoxDiv.appendTo("#div");
  x++;
}


function changeIt(rowIndex) {
  //i++; DO NOT INCREMENT I!!! IT WILL CREATE THE REFERRAL ERROR YOU HAD. BECAUSE THE FUNCTION WOULD BE REFERRING TO A NON-EXISTING INPUT ELEMENT. I REPLACED IT WITH ROWINDEX, WHICH IS INITIATED WHILE CALLING THE FUNCTION
  var select = document.getElementById("slct" + rowIndex);

  var divv = document.getElementById("container" + rowIndex);
  var value = select.value;

  if (value == 0.5) {
    toAppend = "<label class='control-label col-sm-1'>Time:</label><div class='col-sm-2'><div class='input-group date' id = 'date'> <span class='input-group-addon'><i class='fa fa-clock-o'></i></span><input type='time' class='form-control' ></div></div><div class='col-sm-2'><div class='input-group date' id = 'dates'> <span class='input-group-addon'><i class='fa fa-clock-o'></i></span><input type='time' class='form-control'  ></div></div>";
    divv.innerHTML = toAppend;
    return;
  }
  if (value == 1) {
    toAppend = "";
    divv.innerHTML = toAppend;
    return;
  }
}
$("#button").click(function() {
  appendRow();
});
$("#div").on("change", ".input", function() {
  //EXTRACT THE NUMBER FROM THE CLICKED ITEM'S ID
  let rowIndex = $(this).attr("id").replace(/.[^0-9]/g, "");
  changeIt(rowIndex);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div">
  <button value="Add Row" id="button">Add row</button>
</div>

Answer 1

make sure your script is below the html for your button

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div">
    <button value="Add Row" id="button">Add row</button>
</div>
<!-- your js goes here -->
<script>
var x = 1;

    function appendRow() {
        var newTextBoxDiv = $(document.createElement('div'))
            .attr("id", 'TextBoxDiv' + x);
        // I ASSIGNED A CLASS CALLED INPUT TO THE ELEMENT YOU WANT TO SELECT
        newTextBoxDiv.after().html("<div class='form-group'><label class='control-label col-sm-3'  style='text-align:right;'>Date:</label><div class='col-sm-3'><div class='input-group date' ><span class='input-group-addon'><i class='fa fa-calendar'></i></span><input type='Date' class='form-control'  name='Dates'> <select class='form-control input' id='slct" + x + "' name='Branch''><option  disabled=''  selected=''>Please Select Leave Day</option> <option value='1' >1</option><option value='0.5' >0.5</option></select></div></span></div><div id='container" + x + "'></div></div>");
        newTextBoxDiv.appendTo("#div");
        x++;
    }


    function changeIt(rowIndex) {
        //i++; DO NOT INCREMENT I!!! IT WILL CREATE THE REFERRAL ERROR YOU HAD. BECAUSE THE FUNCTION WOULD BE REFERRING TO A NON-EXISTING INPUT ELEMENT. I REPLACED IT WITH ROWINDEX, WHICH IS INITIATED WHILE CALLING THE FUNCTION
        var select = document.getElementById("slct" + rowIndex);

        var divv = document.getElementById("container" + rowIndex);
        var value = select.value;

        if (value == 0.5) {
            toAppend = "<label class='control-label col-sm-1'>Time:</label><div class='col-sm-2'><div class='input-group date' id = 'date'> <span class='input-group-addon'><i class='fa fa-clock-o'></i></span><input type='time' class='form-control' ></div></div><div class='col-sm-2'><div class='input-group date' id = 'dates'> <span class='input-group-addon'><i class='fa fa-clock-o'></i></span><input type='time' class='form-control'  ></div></div>";
            divv.innerHTML = toAppend;
            return;
        }
        if (value == 1) {
            toAppend = "";
            divv.innerHTML = toAppend;
            return;
        }
    }
    $("#button").click(function() {
        console.log('test');
        appendRow();
    });
    $("#div").on("change", ".input", function() {
        //EXTRACT THE NUMBER FROM THE CLICKED ITEM'S ID
        let rowIndex = $(this).attr("id").replace(/.[^0-9]/g, "");
        changeIt(rowIndex);
    });</script>