title: How to get object parameter from li element that have append
body: <p>I have simple 'data' include li tag and data.
  then I have append it to 'ul' tag.
  I want each li tag can click to pass its some data to txtBox.</p>
  
  <p>I use 'for loop' to make string value to append like..</p>
  
  <pre><code>datata = '&lt;li onclick = "getset('+ data[i] +')&gt;&lt;/li&gt;"&gt;';
  </code></pre>
  
  <p>In function getset I expect click to sent for 1 object like...</p>
  
  <pre><code>{
     id: 1,
     name: "namename1",
     lname: "imlname1",
     job: "artist",
     ages: "17"
  }
  </code></pre>
  
  <p>Then. can use value in object like... getData.name, getData.job,...</p>
  
  <pre><code>function getset(getData){
   getData.name = document.getElementById("txtBox").value;
  }
  </code></pre>
  
  <p>but.. all I get just error <strong>'Uncaught SyntaxError: Unexpected identifier'</strong></p>
  
  <p><strong>Why that happend?? thank you</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>window.onload = function () {
              data = [
                  {
                      id: 1,
                      name: "namename1",
                      lname: "imlname1",
                      job: "artist",
                      ages: "17"
                  }, {
                      id: 2,
                      name: "namename2",
                      lname: "imlname2",
                      job: "artist",
                      ages: "25"
                  }, {
                      id: 3,
                      name: "namename3",
                      lname: "imlname3",
                      job: "artist",
                      ages: "15"
                  }, {
                      id: 4,
                      name: "namename4",
                      lname: "imlname4",
                      job: "artist",
                      ages: "18"
                  }, {
                      id: 5,
                      name: "namename5",
                      lname: "imlname5",
                      job: "artist",
                      ages: "27"
                  }
              ];
              var datata = '';
              for (let i = 0; i &lt; data.length; i++) {
                  datata += '&lt;li onclick="getset(' + data[i] + '  )"&gt;' + data[i].name + '&lt;/li&gt;';
              }
       
              $("ul").append(datata);
          }
  
          function getset(data) {
              console.log("1");
              console.log(data);
          }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>li {
              border: 1px solid #ddd;
              margin-top: -1px;
              /* Prevent double borders */
              background-color: #f6f6f6;
              padding: 12px;
              text-decoration: none;
              font-size: 18px;
              color: black;
              display: block;
              /* Make it into a block element to fill the whole list */
              position: relative;
  }
  
  li:hover {
              background-color: #adadad;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
      &lt;title&gt;TEST&lt;/title&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"&gt;&lt;/script&gt;
     
  &lt;/head&gt;
  
  &lt;body&gt;
      
  
      &lt;input type="search" id="txtBox"&gt;
      &lt;ul id="ulTag"&gt;
  
      &lt;/ul&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>last of result I will make textbox to search data from 'data',variable, then click to get textbox complete data.</p>