Javascript Stops Working When I Adapt Another Snippet Inside

I had a jquery snippet working but the minute I add another javascript code in the existing script the JS stops working. The code I added is the one below, which works in this snip

Solution 1:

jQuery.on method has been added in version 1.7 and you have 1.6 ( you can replace it with bind or you can upgrade the version of jQuery library)

Take a look on the below snippet

jQuery(document).ready( function(){

    $("ul").on("click", ".init", function() {
      $(this).closest("ul").children('li:not(.init)').toggle();
  });

  var allOptions = $("ul").children('li:not(.init)');
  $("ul").on("click", "li:not(.init)", function() {
    allOptions.removeClass('selected');
    $(this).addClass('selected');
    $("ul").children('.init').html($(this).html());
    allOptions.toggle();
    console.log($('.selected .value').text());
  });

     
	var txtFromDate, txtToDate;
  $("#txtFrom").datepicker({
    dateFormat: "d/M/yy",
    numberOfMonths: 1,
    onSelect: function(selected) {
      txtFromDate = selected;
      var dt = newDate(selected);
      dt.setDate(dt.getDate() + 1);
      $("#txtTo").datepicker("option", "minDate", dt);
    }
  });
  $("#txtTo").datepicker({
    numberOfMonths: 1,
    onSelect: function(selected) {
      txtToDate = selected;
      var dt = newDate(selected);
      dt.setDate(dt.getDate() - 1);
      $("#txtFrom").datepicker("option", "maxDate", dt);
    }
  });

  $('a#atributo').click(function() {
    // var link = day_1+month_1+year;var monthNames = [
		"Jan", "Feb", "Mar",
		"Apr", "May", "Jun", "Jul",
		"Aug", "Sep", "Oct",
		"Nov", "Dec"
	  ];

    var date1 = $("#txtFrom").datepicker('getDate'),
        day_1  = date1.getDate(),  
        month_1 = date1.getMonth() + 1,              
        year_1 =  date1.getFullYear();
            
    var date2 = $("#txtTo").datepicker('getDate'),
        day_2  = date2.getDate(),  
        month_2 = date2.getMonth() + 1,              
        year_2 =  date2.getFullYear(); 
    
    
    var people = $('#search-pax :selected').val();
    
    $(this).attr("href", "http://www.lekkeslaap.co.za/akkommodasie-in/"+where+"?q="+where+"&start="+day_1+"+"+monthNames[month_1]+"+"+year_1+'&end='+day_2+'+'+monthNames[month_2]+'+'+year_2+'&pax='+people);
  });
});

body{
  padding:30px;
}
ul { 
    height: 30px;
    width: 150px;
    border: 1px#000 solid;
}
ulli { padding: 5px10px; z-index: 2; }
ulli:not(.init) { float: left; width: 130px; display: none; background: #ddd; }
ulli:not(.init):hover, ulli.selected:not(.init) { background: #09f; }
li.init { cursor: pointer; }

a#submit { z-index: 1; }

li{
  display: flex;
  justify-content: space-between;

}
li, ul{
  padding: 0;
  margin: 0;
}


body{
  padding:30px;
}
ul { 
    height: 30px;
    width: 150px;
    border: 1px#000 solid;
}
ulli { padding: 5px10px; z-index: 2; }
ulli:not(.init) { float: left; width: 130px; display: none; background: #ddd; }
ulli:not(.init):hover, ulli.selected:not(.init) { background: #09f; }
li.init { cursor: pointer; }

a#submit { z-index: 1; }

li{
  display: flex;
  justify-content: space-between;
  
}
li, ul{
  padding: 0;
  margin: 0;
}

#column{
  position: relative;
}
li{
  list-style: none;
  justify-content: space-between;
  display: flex;
}
li:hover{
  background: black;
  color: white;

}
.date-example-containeri.fa {
    color: #555;
}

.date-example-container {
    width: 100%;
    max-width: 350px;
    margin: 20px0;
	color: #9999a2;
	clear: both;
}

.date-example-containerlabel{color: #555555;}


input#txtTo,
input#txtFrom{
  position: relative;
  padding: 10px;
}

input#txtFrom:after{
  font-family: fontawesome;
  content: '\f073';
  psotion: absolute;
}

.fa-calendar-o{
  position: absolute;
  right: 0;
  top: 26px;
  padding: 10px;
}
.submit-here{
  display: inline-block;
  background: #ee782e;
  border: 0;
  color: white;
  padding:10px;
  margin-top: 10px;
}

select{
  width: 100%;
  padding: 10px;
  -webkit-appearance: none;
}

.date-example-container.field.right {
    position: relative;
	float: none;
}

.icon {
    width: 33px;
    height: 40px;
    position: absolute;
    right: 0;
    color: #000;
	font-size: 18pt;
}

.from-toi {
    font-size: 18pt;
}

.selection{
  position: relative;
}

.date-example-container.field.right.icon {
	top: 36px;
}

.selection.icon {
    top: 34px;
}

.from-to.icon{
	right: 3px;
	top: 26px;
}

input#txtTo, input#txtFrom {
    position: relative;
    padding: 10px;
    width: 100%;
    max-width: 130px;
}

.date-example-containerinput{
	width: 100%;
	/*display: block;
*/}

.date-example-containerlabel {
    display: block;
}

.from-to {
    display: flex;
    padding: 10px0;
    justify-content: space-between;
}

.from, .to {
    position: relative;
}

a#atributo {
    display: block;
    background: #ee782e;
    border: 0;
    color: white;
    padding: 10px;
    margin-top: 10px;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
  
}

td.ui-datepicker-unselectable.ui-state-disabled {
    background: white;
    color: #ebebeb;
}

table.ui-datepicker-calendartd {
    border: 0;
    background: #DADADA;
    color: black;
}

a.ui-state-default {
    color: #555;
}

.ui-datepicker-title > span {
    border-bottom: 1px solid;
}

.ui-datepicker-calendarth {
    background: transparent !important;
    border: 0!important;
    color: #999!important;
    font-weight: bold !important;
}

input#txtTo:active, 
input#txtFrom:active,
select#search-pax:active,
input#txtTo:hover, 
input#txtFrom:hover,
select#search-pax:hover,
select#selection:hover,
select#selection:active {
    border-color: #EE782E;
    font-style: normal;
    outline: 0!important;
}
.ui-datepicker.ui-datepicker-header.ui-datepicker-next,
.ui-datepicker.ui-datepicker-header.ui-datepicker-prev{
	background: none;
}

.ui-datepicker.ui-datepicker-header.ui-datepicker-next:after,
.ui-datepicker.ui-datepicker-header.ui-datepicker-prev:before{
	font-family: fontawesome;
	color: #999;
}

.ui-datepicker.ui-datepicker-header.ui-datepicker-prev:before {
	content: '\f0d9 ';   
}

.ui-datepicker.ui-datepicker-header.ui-datepicker-next:after{	
	content: '\f0da';
}

body{
  padding:30px;
}
ul { 
    height: 30px;
    width: 150px;
    border: 1px#000 solid;
}
ulli { padding: 5px10px; z-index: 2; }
ulli:not(.init) { float: left; width: 130px; display: none; background: #ddd; }
ulli:not(.init):hover, ulli.selected:not(.init) { background: #09f; }
li.init { cursor: pointer; }

a#submit { z-index: 1; }

li{
  display: flex;
  justify-content: space-between;

}
li, ul{
  padding: 0;
  margin: 0;
}

body{
  padding:30px;
}
ul { 
    height: 30px;
    width: 150px;
    /*border: 1px #000 solid;*/
}
ulli { padding: 5px10px; z-index: 2; }
ulli:not(.init) { float: left; width: 130px; display: none; background: #ddd; }
ulli:not(.init):hover, ulli.selected:not(.init) { background: #09f; }
li.init { cursor: pointer; }

a#submit { z-index: 1; }

li{
  display: flex;
  justify-content: space-between;

}
li, ul{
  padding: 0;
  margin: 0;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"type="text/javascript"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"type="text/javascript"></script><linkhref="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/start/jquery-ui.css"type="text/css" /><linkhref="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /><ulclass="list-unstyled"style="list-style: none;"><liclass="init">--SELECT--</li><lidata-value="value 2"><spanclass="value">Durban</span><spanclass="numbers">1700</span></li><lidata-value="value 3"><spanclass="value">Durban</span><spanclass="numbers">1400</span></li><lidata-value="value 4"><spanclass="value">Durban</span><spanclass="numbers">1200</span></li></ul><divclass="date-example-container"><divclass="selection"><divclass="label"><label>Waarheen gaan jy?</label><selectid="selection"><optionvalue="">Naam van Blyplek</option><optionvalue="karoo">Karoo</option><optionvalue="knysna">Knysna</option><optionvalue="durban">Durban</option><optionvalue="pretoria">Pretoria</option><optionvalue="kaapstad">Kaapstad</option><optionvalue="tuinroete">Tuinroete</option></select></div><divclass="icon"tabindex="0"><div><iclass="fa fa-search"aria-hidden="true"></i></div></div></div><divclass="from-to"><divclass="from"><divclass="label"><label>Vanaf</label><inputplaceholder="Inklok"type="text"id="txtFrom" /></div><iclass="fa fa-calendar-o"aria-hidden="true"></i></div><divclass="to"><divclass="label"><label>Tot</label><inputplaceholder="Uitklok"type="text"id="txtTo" /></div><iclass="fa fa-calendar-o"aria-hidden="true"></i></div></div><divclass="field right"><divclass="label"><label>Aantal gaste</label><selectid="search-pax"name="pax"class="ls-select "><optionvalue="1">1 gas</option><p>Vim aqui pra vadiar</p><optionvalue="2">2 gaste</option><optionvalue="3">3 gaste</option><optionvalue="4">4 gaste</option><optionvalue="5">5 gaste</option><optionvalue="6">6 gaste</option><optionvalue="7">7 gaste</option><optionvalue="8">8 gaste</option><optionvalue="9">9 gaste</option><optionvalue="10">10 gaste</option><optionvalue="11">11 gaste</option><optionvalue="12">12 gaste</option><optionvalue="13">13 gaste</option><optionvalue="14">14 gaste</option><optionvalue="15">15 gaste</option><optionvalue="16">16 gaste</option><optionvalue="17">17 gaste</option><optionvalue="18">18 gaste</option><optionvalue="19">19 gaste</option><optionvalue="20">20 gaste</option></select></div><divclass="icon"tabindex="0"><div><iclass="fa fa-user"aria-hidden="true"></i></div></div></div><aid="atributo"href="#"target="_blank">SOEK AKKOMMODASIE</a></div>