How to create dependent dropdown list side by side with an add option

Question

I want to add 2 dropdowns list side by side. Like first dropdown for skills like HTML5,CSS3,JS,PHP etc and 2nd dropdown for levels like begineer,advanced,expert etc. I also want to have an add button so i can keep on adding more skills. Below code helps me to add 2 buttons but vertically instead of aide by side. But I want to know how to have an add button.

<label for="skills">Skills</label>
<div id="example1" class="bs-docs-example">
<select class="step1">
<option value="">Please select an option</option>
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
<option>Option4</option>
</select>
</div>

<label for="skills">Level</label>
<div id="example2" class="bs-docs-example1">
<select class="step2">
<option value="">option</option>
<option>Option5</option>
<option>Option6</option>
<option>Option7</option>
<option>Option8</option>
</select>
</div>

Answer 1

add button will add "abc" option in skills select box.

 $( "#add" ).click(function() { $('#one').append( new Option("abc","abc") ); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div style="width: 100%; overflow: hidden;"> <div style="width: 70%; float: left;" id="example1"class="bsdocs-example"> <label for="skills">Skills</label> <select id="one" class="step1"> <option value="">Please select an option</option> <option>Option1</option> <option>Option2</option> <option>Option3</option> <option>Option4</option> </select> </div> <div style="margin-left: 30%" id="example2"> <label for="skills">Level</label> <select class="step2"> <option value="">option</option> <option>Option5</option> <option>Option6</option> <option>Option7</option> <option>Option8</option> </select> </div> <div style="margin-top:100px" id="example2"> <button id="add"> add </button> </div> </div> 

Answer 2

Try This... I hope this is your expected result :)

<table>
    <tr>
        <td><label for="skills">Skills</label></td>
        <td colspan="2">
        <select id="one" class="step1">
            <option value="">Please select an option</option>
            <option>Option1</option>
            <option>Option2</option>
            <option>Option3</option>
            <option>Option4</option>
        </select></td>
        <td><label for="skills">Level</label></td>
        <td colspan="2">
        <select id="two" class="step2">
            <option value="">option</option>
            <option>Option5</option>
            <option>Option6</option>
            <option>Option7</option>
            <option>Option8</option>
        </select></td>
        <td><button onclick="addSkill()"> add skill </button></td>
    </tr>
</table>
<label id="currentSkills"></label>

javascript

function addSkill(){
    var newSkill=$('#one').val();
    var newLevel=$('#two').val();
    console.log(newSkill);
    $('#currentSkills').append(newSkill+'-'+newLevel+"<br>");
}

Answer 3

try this then...

 $( "#add" ).click(function() { var row = $("#wrapper-1").clone(); //row.remove("#add"); $('#wrapper').append(row); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></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>Option1</option> <option>Option2</option> <option>Option3</option> <option>Option4</option> </select> </div> <div class="general" style="float: left; width: 35%;"> <label for="skills">Level</label> <select class="step2"> <option value="">option</option> <option>Option5</option> <option>Option6</option> <option>Option7</option> <option>Option8</option> </select> </div> </div> <div class="add-general" style="float: left; width: 15%;"> <button id="add"> add </button> </div> </div>