Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id="inputFence1" class="clonedInputFence">
    <fieldset id="fenceDescripton">
        <legend><strong>Fence Description</strong>
        </legend>Fence Description:
        <select name="fenceHeight" id="fenceHeight">
            <option value="select">Select Fence Height</option>
            <option value="6" id="fH6">6 Ft.</option>
        </select>
        <select name="fenceType" id="fenceType">
            <option value="select">Select Fence Type</option>
            <option value="wr1" id="wr1">WRC #1</option>
        </select>
    </fieldset>
</div>
<input type="button" id="btnAddFence" value="Add Another Fence" />
<input type="button" id="btnDelFence" value="Remove Fence" />
</body>
</html>
 
$('#btnAddFence').click(function () {
    var num = $('.clonedInputFence').length; // how many "duplicatable" input fields we currently have
    var newNum = num + 1; // the numeric ID of the new input field being added
    // create the new element via clone(), and manipulate it's ID using newNum value
    var newElem = $('#inputFence' + num).clone().attr('id', 'inputFence' + newNum);
    //Fence Description 
    newElem.children('fieldset').attr('id', 'fenceDescripton'+newNum);
    newElem.children("select[name=fenceHeight] option:selected").attr('id', 'fenceHeight' + newNum).attr('name', 'fenceHeight' + newNum);
    newElem.children("select[name=fenceType] option:selected").attr('id', 'fenceType' + newNum).attr('name', 'fenceType' + newNum);
    $('#inputFence' + num).after(newElem);
    // enable the "remove" button
    //$('#btnDel').attr('disabled','');
    $('#btnDelFence').removeAttr('disabled');
    // business rule: you can only add 5 names
    //if (newNum == 5)
    //$('#btnAdd').attr('disabled','disabled');
});
$('#btnDelFence').click(function () {
    var num = $('.clonedInputFence').length; // how many "duplicatable" input fields we currently have
    $('#inputFence' + num).remove(); // remove the last element
    // enable the "add" button
    //$('#btnAdd').attr('disabled','');
    $('#btnAddFence').removeAttr('disabled');
    // if only one element remains, disable the "remove" button
    if (num - 1 == 1) $('#btnDelFence').attr('disabled', 'disabled');
});
$('#btnDelFence').attr('disabled', 'disabled');
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers