Add and remove form row inputs

25
January 17, 2019, at 08:00 AM

I am new to Javascript and I am trying to figure out how to make a form with an add and remove buttons. In my form I would have a row of options and the add button would just keep repeating these options. I have given an example screen shot to display what I am looking to do. Also I have a static mock without any Javascript here JsFiddle

<div class="container">
<form>
<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Option 1</th>
      <th scope="col">Option 2</th>
      <th scope="col">Option 3</th>
      <th scope="col">Option 4</th>
      <th scope="col">Option 5</th>
      <th scope="col">Add/Delete</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Option1 Value</td>
      <td>Option2 Value</td>
      <td>Option3 Value</td>
      <td>Option4 Value</td>
      <td>Option5 Value</td>
      <td><button type="button" class="btn btn-danger">Del</button><td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Option1 Value</td>
      <td>Option2 Value</td>
      <td>Option3 Value</td>
      <td>Option4 Value</td>
      <td>Option5 Value</td>
      <td><button type="button" class="btn btn-danger">Del</button><td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td><select class="custom-select" id="inputGroupSelect01">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select></td>
      <td><select class="custom-select" id="inputGroupSelect01">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select></td>
      <td><select class="custom-select" id="inputGroupSelect01">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select></td>
      <td><select class="custom-select" id="inputGroupSelect01">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select></td>
      <td><select class="custom-select" id="inputGroupSelect01">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select></td>
      <td><button type="button" class="btn btn-primary">Add</button><td>
    </tr>
  </tbody>
</table>
</form>
</div>

READ ALSO
console.log no output on Mac works on MacBook

console.log no output on Mac works on MacBook

I have an HTML file with some javascript (I am doing a course on web development)In the javascript I have a line "console

48
Nodejs modbus slave working example needed

Nodejs modbus slave working example needed

I try to make test setup working and somehow nothing worksWin10 64 bit, fresh node js

54
how to create api routes in node.js

how to create api routes in node.js

I am new to Nodejs and I want to create the routes for the CRUD operation like "localhost:3000/create", "localhost:3000/retrieve", "localhost:3000/update" and so on

35
Error: The content of elements must consist of well-formed character data or markup

Error: The content of elements must consist of well-formed character data or markup

I'm creating an A/B in a test blog (blogspot) by using Google AnalyticsI got several errors when trying to copy the script that I get from GA

8