Dynamic Dependent Select from dropdown using Jquery and Ajax and json file

I'm looking for some help with the code below,

I have this form that each dropdown list depends on the one above it, so you based on what your selection is, the right data will show on the next selection. I want dropdown list 4 (select house) activate based on dropdown list 1 select country. so when the country selected. both state(2) and the house(4) will be activated and showing data. see screenshot below,

here is the HTML code

$(document).ready(function(){

load_json_data('country');

function load_json_data(id, parent_id)
{
 var html_code = '';
 $.getJSON('https://raw.githubusercontent.com/ahammoudi/jason_data/master/data.jason', function(data){

  html_code += '<option value="">Select '+id+'</option>';
  $.each(data, function(key, value){
   if(id == 'country')
   {
    if(value.parent_id == '0')
    {
     html_code += '<option value="'+value.id+'">'+value.name+'</option>';
    }
   }
   else
   {
    if(value.parent_id == parent_id)
    {
     html_code += '<option value="'+value.id+'">'+value.name+'</option>';
    }
   }
  });
  $('#'+id).html(html_code);
 });

}

$(document).on('change', '#country', function(){
 var country_id = $(this).val();
 if(country_id != '')
 {
  load_json_data('state', country_id);
 }
 else
 {
  $('#state').html('<option value="">Select state</option>');
  $('#city').html('<option value="">Select city</option>');
  $('#house').html('<option value="">Select house</option>');
 }
});
$(document).on('change', '#state', function(){
 var state_id = $(this).val();
 if(state_id != '')
 {
  load_json_data('city', state_id);
 }
 else
 {
  $('#city').html('<option value="">Select city</option>');
 }
});

$(document).on('change', '#city', function(){
 var city_id = $(this).val();
 if(city_id != '')
 {
  load_json_data('house', city_id);
 }
 else
 {
  $('#house').html('<option value="">Select house</option>');
 }
});
});

<!DOCTYPE html>
<html>
 <head>
  <title>Webslesson Tutorial | JSON - Dynamic Dependent Dropdown List using Jquery and Ajax</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 </head>
 <body>
  <script src="script.js"></script>
  <br /><br />
  <div class="container" style="width:600px;">
   <h2 align="center">JSON - Dynamic Dependent Dropdown List using Jquery and Ajax</h2><br /><br />
   <select name="country" id="country" class="form-control input-lg">
    <option value="">Select country</option>
   </select>
   <br />
   <select name="state" id="state" class="form-control input-lg">
    <option value="">Select state</option>
   </select>
   <br />
   <select name="city" id="city" class="form-control input-lg">
    <option value="">Select city</option>
   </select>
   <br />
   <select name="house" id="house" class="form-control input-lg">
    <option value="">Select house</option>
   <br />
 </div>
 </body>
</html>

Solution

has been fixed. here is what i did>

$(document).ready(function(){

load_json_data('country');

function load_json_data(id, parent_id)
{
 var html_code = '';
 $.getJSON('https://raw.githubusercontent.com/ahammoudi/jason_data/master/data.jason', function(data){

  html_code += '<option value="">Select '+id+'</option>';
  $.each(data, function(key, value){
   if(id == 'country')
   {
    if(value.parent_id == '0')
    {
     html_code += '<option value="'+value.id+'">'+value.name+'</option>';
    }
   }
   else
   {
    if(value.parent_id == parent_id)
    {
     html_code += '<option value="'+value.id+'">'+value.name+'</option>';
    }
   }
  });
  $('#'+id).html(html_code);
 });

}

$(document).on('change', '#country', function(){
 var country_id = $(this).val();
 if(country_id != '')
 {
  load_json_data('state', country_id);
 }
 else
 {
  $('#state').html('<option value="">Select state</option>');
  $('#city').html('<option value="">Select city</option>');
  $('#house').html('<option value="">Select house</option>');
 }
});
$(document).on('change', '#state', function(){
 var state_id = $(this).val();
 if(state_id != '')
 {
  load_json_data('city', state_id);
 }
 else
 {
  $('#city').html('<option value="">Select city</option>');
 }
});

$(document).on('change', '#country', function(){
 var country_id = $(this).val();
 if(country_id == 1)
 {
  load_json_data('house', 7);
 }
 else if(country_id == 2)
 {
  load_json_data('house', 8);
 }
 else
 {
  $('#house').html('<option value="">Select house</option>');
 }
});
});

<!DOCTYPE html>
<html>
 <head>
  <title>Webslesson Tutorialx</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 </head>
 <body>
  <script src="script.js"></script>
  <br /><br />
  <div class="container" style="width:600px;">
   <h2 align="center">JSON x</h2><br /><br />
   <select name="country" id="country" class="form-control input-lg">
    <option value="">Select country</option>
   </select>
   <br />
   <select name="state" id="state" class="form-control input-lg">
    <option value="">Select state</option>
   </select>
   <br />
   <select name="city" id="city" class="form-control input-lg">
    <option value="">Select city</option>
   </select>
   <br />
   <select name="house" id="house" class="form-control input-lg">
    <option value="">Select house</option>
   <br />
 </div>
 </body>
</html>

i just changed the last function to

$(document).on('change', '#country', function(){
 var country_id = $(this).val();
 if(country_id == 1)
 {
  load_json_data('house', 7);
 }
 else if(country_id == 2)
 {
  load_json_data('house', 8);
 }
 else
 {
  $('#house').html('<option value="">Select house</option>');
 }
});