save prefrence

HTML

<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.metro.min.css">
<body>
  <!-- <div id="test1">
    <a href="www.google.com" class="test">Google</a>
    <a href="www.google.com" class="test">Link 2</a>
    <a href="www.google.com" class="test">Link 3</a>
    <a href="www.google.com" class="test">Link 4</a>
  </div> -->


  <div>

    <select id="cars">
      <option value="Default">Default</option>
    </select>

    <span id="open1">add/edit prefrence</span>
    <span>save prefrence</span>
    <span id="clearPrefrence">clear prefrence</span>
    <span>export</span>
  </div>

  <div id="win1" style="">
    <!--  removed display:none> -->
    <!--  <form action="/action_page.php"> -->
    First name: <input id="mickey" type="text" name="FirstName"><br>
    <input id="win1Submit" type="submit" value="Click me!">
    <!-- </form>
   -->
  </div>

  <!-- initially hidden right-click menu -->
  <div class="hide" id="rmenu">
    <ul>
      <li>
        <!--         <a href="http://www.google.com">codeLong</a>
         --><input checked="checked" type="checkbox" name="vehicle" value="Bike" class="checkbox_check">codeLong<br>

      </li>

      <li>
        <!--         <a href="http://localhost:8080/login">codeShort</a>
         --><input checked="checked" type="checkbox" name="vehicle" value="Bike">codeShort<br>


      </li>

      <li>
        <!--         <a href="C:\">name</a>
         --><input type="checkbox" checked="checked" name="vehicle" value="Bike">name<br>

      </li>
    </ul>
  </div>


  <div id="grid1"></div>

</body>

CSS

#rmenu {
  position: absolute;
}

.show {
  z-index: 1000;
  position: absolute;
  background-color: #C0C0C0;
  border: 1px solid blue;
  padding: 2px;
  display: block;
  margin: 0;
  list-style-type: none;
  list-style: none;
}

.hide {
  display: none;
}

.show li {
  list-style: none;
}

.show a {
  border: 0 !important;
  text-decoration: none;
}

.show a:hover {
  text-decoration: underline !important;
}

#clearPrefrence {
  border: 5px solid red;
}

#open1 {
  border: 5px solid green;
}

JavaScript

$("tr th[data-field='codeLong']").hide();



    if ($('input.checkbox_check').prop('checked')) {
      //blah blah
      alert("checked");

      $("tr th[data-field='codeLong']").show();
    }


    $("#win1").hide();

    /*document.getElementById('cars').options[0].text = localStorage.getItem("someVarName") || 'unkonwn';
    var dropdown = $('<select>');
    alert("I am here dropdownmenu select"); */
    var dropdown = $('#cars');
    dropdown.options = function(data, selectedKey) {
      var self = this;
      var newOptions = '<option value="Default">Default</option>'; //create one objec to save new options
      $.each(data, function(ix, val) {
        var selected = (val == selectedKey) ? 'selected="selected"' : '';
        if (val != 'Default') {
          newOptions += '<option value="' + val + '" ' + selected + '>' + val + '</option>';
        }
        //data.push(option);
      });
      self.html(newOptions);
      self.change();
    }
    //var array = ['one', 'two', 'three'];
    var array = [];
    var storedPreferences = localStorage.getItem('preferences');
    storedPreferences = (storedPreferences) ? JSON.parse(storedPreferences) : {};
    storedPreferences.Default = {
      columns: [0, 1, 2],
    };
    for (var storedPreference in storedPreferences) {
      array.push(storedPreference);
    }
    dropdown.options(array, 'Default');
    //$('body').append(dropdown);
    $('#btnSubmit').on('click', function(ix, val) {
      //should clear out the current options
      //and replace with the new array
      alert("I am here dropdownmenu");
      var newArray = ['four', 'five', 'six'];
      dropdown.options(newArray, 'Default');
    });


    //checkIDGrid

/*     $("#checkIDGrid").click(function() {
      alert("I am here");
    
      var img = $('<img />', {
        id: 'Myid',
        src:...