Instead of adding another element It is landing to a another page

Question

I have created a modal list using bootstrap and Actually I have a form list created and when entered details, it will land me to a desired page. Register button performs this function. But now I have also added a dependent dropdown(Skills,Level) options. It also has a add button and Whenever I am clicking on add button instead of adding another elements,its landing me to that same page and displays added successfully message. Can anyone help me?

<form id='work' method="post" action="registerdb.php">
<div class="form-group">
<label for="recipient-name" class="control-label">First Name</label>
<div class="input-group"><span class="input-group-addon" id="basic-addon1">           
<span class="glyphicon glyphicon-user"></span></span>
<input type="text"  id = "firstname" name = "firstname" class="form-control"         
 placeholder="First Name" aria-describedby="basic-addon1">
</div>
</div>
<div class="form-group"><label for="exampleInputEmail1">Last Name</label>
<div class="input-group"><span class="input-group-addon" id="basic-addon1">   
<span class="glyphicon glyphicon-user"></span></span>
<input type="text" id = "lastname" name = "lastname" class="form-control"   
placeholder="Last Name" aria-describedby="basic-addon1">
</div>
</div>
<div class="form-group">
<label>Company Name</label>
<div class="input-group"><span class="input-group-addon" id="basic-addon1">      
<span class="glyphicon glyphicon-briefcase"></span></span>
<input type="text" id= "companyname" name = "companyname" class="form-       
control" placeholder="Company Name" aria-describedby="basic-addon1">
</div>
</div>
<div class="form-group"><label for="exampleInputEmail1">E-mail ID</label>
<div class="input-group"><span class="input-group-addon" id="basic-addon1">  
<span class="glyphicon glyphicon-envelope"></span></span>
<input type="text" id = "emailid" name = "emailid" class="form-control"      
placeholder="Email" aria-describedby="basic-addon1">
</div>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<div class="input-group"><span class="input-group-addon" id="basic-addon1">  
<span class="glyphicon glyphicon-asterisk"></span></span>                       
<input type="password" id = "password" name = "password" class="form-  
control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Type of Industry</label>
<div class="input-group">
<select class="input-medium bfh-countries" data-country="US">
<option value="" disabled="disbaled" selected="selected">Please Select a     
Value</option>    
<option value="Accounting">Accounting</option>   
<option value="Aeronautical">Aeronautical</option>
<option value="Agriculture">Agriculture</option>
<option value="Science and Research">Science and Research</option>
</select>
</div>
</div>            
</div>
<hr>
<div align="center">
<button type="button" class="btn btn-primary" data-   
dismiss="modal">Close</button>
<input class="btn btn-primary" type = "submit" name = "submit" value =    
"register" />
 </div>
 </form>
 <script>
 $( "#add" ).click(function() {
 var row = $("#wrapper-1").clone();
 //row.remove("#add");
 $('#wrapper').append(row);
 });
 </script>
 <div id="wrapper" width="100%">
 <div id="wrapper-1" style="float: left; width: 85%;">
 <div id="first" style="float: left; width: 65%;"> 
 <label for="skills">Skills</label>
 <select id="one" class="step1">
 <option value="">Please select an option</option>
 <option>C</option>
 <option>C++</option>
 <option>Java</option>
 <option>PHP</option>
 </select>
 </div>
 <div class="general" style="float: left; width: 35%;"> 
  <label for="skills">Level</label>
  <select id="two" class="step2">
  <option value="">option</option>
  <option>Begineer</option>
  <option>Expert</option>
  <option>Advanced</option>
  </select>
  </div>
  </div>
  <div class="add-general" style="float: left; width: 15%;">
  <button id="add">add</button>
  </div>  
  </div>

Answer 1

Your jsfiddle is messed up, you should load external CSS and scripts using the "external" feature on the left. And obviously your local files will not be accessible, so use absolute paths. I took the time to set it up properly this time.

Your HTML also looks messy, but browsers still understand it.

As for your unexpected behaviour, I think this post applies to your situation: Form is submitted when I click on the button in form. How to avoid this?

In essence: you just need to specify a type attribute (with value different from "submit" obviously) so that your "Add" button stops acting as a submit button.

<button id="add" type="button">add</button>

You also have a problem with attaching event listener on your "Add" button: your code must be executed after your button exists in DOM.

2 simple methods:

• Put your script tag after your button HTML.
• Have your code executed after DOM is ready / loaded (e.g. use jQuery(document).ready(function() { /** your code **/}) to request jQuery to execute it once DOM is ready).

jQuery(document).ready(function() {
    $( "#add" ).click(function() {
        var row = $("#wrapper-1").clone();
        // You should change the id to avoid multiple elements
        // with same id in your DOM...
        $('#wrapper').append(row);
    });
});

Updated jsfiddle: http://jsfiddle.net/qc3tu1f1/4/