title: Change li element class when pressing a button and in that css class change background color
body: <p>I have a todo app.</p>
  
  <p>I managed to make it show an input when pressing the add button and to delete randomly, but when I click the done button I want to change the li element class to a class that has css background color red, but it doesn't work. I tried with jquery but it still doesn't work. The red background suggests that the task is done.</p>
  
  <pre><code>index.html
  &lt;!DOCTYPE html&gt;
  &lt;html lang="en" dir="ltr"&gt;
    &lt;head&gt;
      &lt;link rel="stylesheet" type="text/css" href="stil.css"&gt;
      &lt;!-- Latest compiled and minified CSS --&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"&gt;
  
  &lt;!-- jQuery library --&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;!-- Latest compiled JavaScript --&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class="centru"&gt;
  
  
      &lt;div class="row"&gt;
        &lt;div class="col-lg-12"&gt;
          &lt;h2&gt;TO DO LIST&lt;/h2&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
        &lt;div class="col-lg-6"&gt;
          &lt;input type="text" class="form-control" id="usr" placeholder="Input task..."&gt;
        &lt;/div&gt;
        &lt;div class="col-lg-6"&gt;
          &lt;button type="button" class="btn btn-primary" onclick="adauga()"&gt;Add task&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
        &lt;div class="col-lg-12"&gt;
          &lt;ul class="list-group" id="lista1"&gt;
  
          &lt;/ul&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
  
  
  
      &lt;/div&gt;
  
  
  
  
       &lt;script src="script.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  
  script.js
  
  
      function adauga() {
  
      var inp = document.getElementById('usr').value;
      var list = document.getElementById('lista1');
      var li = document.createElement('li');
      var lungime =  document.getElementById("lista1").getElementsByTagName('li').length;
      for(var i = 0; i &lt; lungime ; i++) {
  
      li.setAttribute("id",i);
  
      }
       li.appendChild(document.createTextNode(inp));
  
       var button = document.createElement("button");
       button.innerHTML = "Delete";
       button.setAttribute("class","btn btn-primary ste");
       button.setAttribute("onclick","sterge()");
  
       //button.setAttribute("class","ste");
       li.appendChild(button);
       list.appendChild(li);
  
    //////////////////////////////////////
  
      var button2 = document.createElement("button");
      button2.innerHTML = "Done";
      button2.setAttribute("class","btn btn-primary done");
      button2.setAttribute("onclick","done()");
  
      li.appendChild(button2);
      list.appendChild(li);
  
  
      }
  
      function change() {
      li.setAttribute("class","xxx");
      }
  
      function sterge() {
  
      $('body').on('click','.ste', function(){
      $(this).parent().remove();
      });
  
      }
  
      function done() {
      $('body').on('click','done',function(){
      $(this).parent().setAttribute("class","btn btn-primary done xxx");
      });
      }
  
  stil.css
  
      .centru {
       width: 600px ;
       margin-left: auto ;
       margin-right: auto ;
  
      }
  
      .lix {
       padding-right: 20px;
       }
  
      .xxx {
      background-color: red;
      color:red;
      }
  </code></pre>