title: building a responsive table using javascript
body: <p>After completing  Javascript/jQuery course using Jon Duckets book, I decided to try out a project which was to create a table in the HTML section and then add the table rows and table dynamically using javascript. I included new text fields in the html section with an add Button, such that when clicked, the add button appends the newly input fields into the table. I was able to do this tho but through out the weekend, I have been trying to include an Edit/Delete button such that when clicked, edits or deletes the table row which was clicked but I haven't been making any positive Headway since on Saturday and I am visibly tired and frustrated. PLEASE I NEED HELP.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let $next = $('#nextInfo');
  $next.hide();
  
  $('#Amor').on('click', function(e) {
    e.preventDefault();
    let $next = $('#nextInfo');
    $next.fadeIn(500);
  })
  
  function formClear() {
    $('#name').val('');
    $('#sex').val('');
    $('#dob').val('');
    $('#state').val('');
    $('#class').val('');
  }
  
  function addTable() {
    let $nam = $('#name').val();
    let $sex = $('#sex').val();
    let $dob = $('#dob').val();
    let $state = $('#state').val();
    let $class = $('#class').val();
    let $next = $('#nextInfo');
    let $add = $('#Add');
  
    $('table tbody').append(
      "&lt;tr&gt;" +
      "&lt;td&gt;" +
      "&lt;button type='button' " + 'id="edbutt" + &gt;' +
      "Edit" +
      "&lt;/button&gt;" +
      "&lt;/td&gt;" +
      '&lt;td&gt;' + $nam + '&lt;/td&gt;' +
      '&lt;td&gt;' + $sex + '&lt;/td&gt;' +
      '&lt;td&gt;' + $class + '&lt;/td&gt;' +
      '&lt;td&gt;' + $dob + '&lt;/td&gt;' +
      '&lt;td&gt;' + $state + '&lt;/td&gt;' +
      "&lt;td&gt;" +
      "&lt;button type='button' " + 'id="debutt" + &gt;' +
      "Delete" +
      "&lt;/button&gt;" +
      "&lt;/td&gt;" +
      "&lt;/tr&gt;");
  
    formClear();
    $next.fadeOut(500);
  };
  
  let Add = document.getElementById('Add');
  Add.addEventListener('click', addTable);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#nextInfo {
    border: 1px blue solid;
    margin-top: 50px;
    width: 500px;
    margin: 0px auto;
    text-align: center;
    height: 500px;
    border-radius: 5px;
  }
  
  #upper {
    background: rgb(85, 109, 204);
    height: 50px;
    margin-left: 0px;
    color: #fff;
    width: 498px;
    padding-top: 10px;
  }
  
  input {
    width: 350px;
    border-radius: 2px;
    height: 30px;
  }
  
  .mu {
    margin-left: -325px;
  }
  
  .me {
    margin-left: -320px;
  }
  
  #Add {
    height: 35px;
    width: 50px;
    margin-top: 50px;
    margin-left: -300px;
  }
  
  #debutt {
    background: blue;
    border: 1px solid rgb(39, 39, 180);
    color: #fff;
  }
  
  #debutt:hover {
    background: rgb(136, 136, 212);
  }
  
  #edbutt {
    background: blue;
    border: 1px solid rgb(39, 39, 180);
    color: #fff;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE Html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;Miracle's Assignment&lt;/title&gt;
  
    &lt;link href="https://fonts.googleapis.com/css?family=Bungee|Bungee+Shade|Covered+By+Your+Grace" rel="stylesheet"&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Open+Sans:800" rel="stylesheet"&gt;
  
    &lt;link rel="stylesheet" type="text/css" href="mir7.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="container"&gt;
  
  
      &lt;table id="personalDetails" class="table table-bordered
                              table-condensed table-striped"&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;th&gt;Edit&lt;/th&gt;
            &lt;th&gt;Name&lt;/th&gt;
            &lt;th&gt;Sex&lt;/th&gt;
            &lt;th&gt;Class&lt;/th&gt;
            &lt;th&gt;DoB&lt;/th&gt;
            &lt;th&gt;State&lt;/th&gt;
            &lt;th&gt;Delete&lt;/th&gt;
  
          &lt;/tr&gt;
  
        &lt;/thead&gt;
        &lt;tbody&gt;
          &lt;tr&gt;
            &lt;td&gt;&lt;a href="" id="Amor"&gt;Add More&lt;/a&gt;&lt;/td&gt;
            &lt;td&gt;Gbambor Jnr&lt;/td&gt;
            &lt;td&gt;Male&lt;/td&gt;
            &lt;td&gt;SS5&lt;/td&gt;
            &lt;td&gt;1994&lt;/td&gt;
            &lt;td&gt;Anambra&lt;/td&gt;
            &lt;td id="del"&gt;
              &lt;a href=""&gt;&lt;img src="delete.png" height="25px"&gt;&lt;/a&gt;
            &lt;/td&gt;
  
          &lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
  
      &lt;form id="newItem"&gt;
  
        &lt;div id="nextInfo"&gt;
  
  
          &lt;b&gt;&lt;div id="upper"&gt;Table Data&lt;/div&gt;&lt;/b&gt;
          &lt;br&gt;&lt;b&gt;&lt;p class="me" &gt; Name&lt;/p&gt;&lt;input type="text" id="name"&gt; &lt;/b&gt;
          &lt;br&gt;&lt;b&gt;&lt;p class="mu" &gt;Sex&lt;/p&gt;&lt;input type="text" id="sex"&gt; &lt;/b&gt;
          &lt;br&gt;&lt;b&gt;&lt;p class="mu" &gt;DOB&lt;/p&gt;&lt;input type="text" id="dob"&gt; &lt;/b&gt;
          &lt;br&gt;&lt;b&gt;&lt;p class="me" &gt;Class&lt;/p&gt;&lt;input type="text" id="class"&gt;&lt;/b&gt;
          &lt;br&gt;&lt;b&gt;&lt;p class="me" &gt;State&lt;/p&gt;&lt;input type="text" id="state"&gt;&lt;/b&gt;
          &lt;p&gt;&lt;input type="button" value="Add" id="Add" class="btn btn-primary"&gt;&lt;/p&gt;
  
  
        &lt;/div&gt;
  
    &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;/form&gt;
  
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;script src="mir7.js"&gt;
    &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have tried so many codes and deleted them at the end when they weren't working. I can't even remeber some of the codes I tried. Please someone fix the Edit and delete Button for me(in a way for a beginner to easily understand) so that when clicked edits/deletes the row that was clicked. THANK YOU</p>