layer_selector is not working

Context

I would like to create a layer selector, so that you can choose what kind of data should be shown. It is a carto torque map. The layer ist working properly. But the data selector is not working fine. If you click, there is nothing happening.

Current Result

<style type="text/sql" id="sql">
      SELECT
        *
      FROM
        test_1_copy,
        (
          WHERE
            handler_id = {{country}}
        )
      </style>

  </head>
  <body>

    <div id="map"></div>

    <div id="sql-buttons" class="layer_selector">
        <p>Farblegende der Haendler</p>
        <ul>
            <li id="Petz Rewe GmbH" data="1"><span style="color:#ff9900"> Petz Rewe</li>
            <li id="Karl Preuß GmbH" data="2"><span style="color:#229a00">Karl Preuss</li>
            <li id="Hieber's Frische Center" data="3"><span style="color:#00ffc4">Hieber's Frische Center</li>
            <li id="Simmel"data="4"><span style="color:#2167ab">Simmel</li>
            <li id="Struve" data="5"><span style="color:#a53ed5">Struve</li>
            <li id="Wilhelm Cramer" data="6"><span style="color:#000000">Wilhelm Cramer</li>
            <li id="Scheck In" data="7"><span style="color:#e8ff00">Scheck In</li>
            <li id="Frischemärkte Baur" data="8"><span style="color:#b81609">Frischemaerkte Baur</li>
            <li id="Wucherpfennig" data="9"><span style="color:#5ca2d1">Wucherpfennig</li>
            <li id="Rewe Richrath" data="10"><span style="color:#ff00d3">Rewe Richrath</li>
        </ul>
    </div>

    <!-- include cartodb.js library -->
    <script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>

    <script>
      function main() {
        var map = new L.Map('map', {
          zoomControl: false,
          center: [51, 10],
          zoom: 7
        });

        var tableName = "test_1_copy";
        var userName = "lznet";

        var layer = L.tileLayer('https://api.mapbox.com/styles/v1/lznet/ciusig46c00wl2jmlf1jcxylw/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoibHpuZXQiLCJhIjoiLVZKcEtxdyJ9.x1ZMMAepL7fg1IiHRED8jw',{
          attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
        }).addTo(map);
        cartodb.createLayer(map, {
          type: "torque",
          order: 1,
          options: {
            table_name: tableName,
            user_name: userName,
            query: "select * from " + tableName,
            tile_style: $('#cartocss_template').html()
            }
        }).done(function(layer) {
          map.addLayer(layer);

        });
      }

// Create data selector
function createSelector(layer) {
    var condition = "";
    var $options = $(".layer_selector").find("li");
    $options.click(function(e) {
      layer.stop();
      var $li = $(e.target);
      var selected = $li.attr('data');
      if (selected === 'XXXXX') {
          var newSQL = "SELECT * FROM " + tableName;
          $("#location").text("");
      } else {
          var newSQL = Mustache.render($("#sql").html(),{country: selected});
          $("#location").text("von " + retailer);
      }
      console.log("SQL applied:",newSQL);
      layer
        .setSQL(newSQL)
        .on('load', function() {
            layer.play();
        });
    });
}

      // you could use $(window).load(main);
      window.onload = main;
    </script>
  </body>
</html>

Can somebody help me? What is wrong with the code? Thanks in advance.

CartoDB / carto.js

layer_selector is not working #2117

Context

Current Result