title: Javascript JQuery - dynamic button creation with events with parameters
body: <p>I'm trying to create and append buttons to a page in html with events assigned to them, this way:</p>
  
  <pre><code>var mdata = JSON.parse(data);
  mdata.forEach(function(k) {
      $("#routesPage").append("&lt;button class='accordion' onclick='setRoute("+k._id.$id+")'&gt;"+k.nombre+"&lt;/button&gt;");
          routesArray[k._id.$id]=k;
      });
  </code></pre>
  
  <p>Previously I'm making a call to a PHP service that gives me the data from a MongoDB database, and for each data I want to create a button with an assigned variable and call to setRoute(). k._id.$id is a string, which is correctly formatted. And I'm getting this error: </p>
  
  <pre><code>Uncaught SyntaxError: Invalid or unexpected token
  </code></pre>
  
  <p>I'm unable to figure out the problem. Is there any way to fix this or do it in a more efficient way?</p>
  
  <p>UPDATE: This is the raw data that I recieve from the DB.</p>
  
  <pre><code>[{"_id":{"$id":"58f224ec34189e19cce416d9"},
  "origin":"Chicago, IL",
  "destination":"Los Angeles, CA",
  "waypoints":[
      {"location":"Joplin, MO","stopover":false},
      {"location":"Oklahoma City, OK","stopover":true}],
  "provideRouteAlternatives":false,"travelMode":"WALKING",
  "unitSystem":"google.maps.UnitSystem.METRIC",
  "nombre":"Ruta de Chicago a Los Angeles"}, ...
  </code></pre>