Only first input field automatically being filled in by JQuery function

Question

I'm trying get a form to fill in inputs automatically when a user puts in information in the footage field which should then be plugged into an equation with JQuery and then the answer should be output in postQuantity. Since the user can add inputs the form is set up that each footage should go with a corresponding postQuantity signified by its suffix number. So that footage2 should be used to find postQuantity2 and 3 for 3 and so on. The problem is that only the first field is automatically filling in and that anytime a different footage class is changed nothing happens. Any insight on where I went wrong and advice on how to fix it will be greatly appreciated! Thanks! Here is a JSFiddle - http://jsfiddle.net/gv0029/TwH5n/

HTML:

    <form>
<fieldset id="fence">
    <div class="inputFence">
        <fieldset class="fenceDescripton">

            <legend><strong>Fence Description</strong></legend>
            <label>Footage<input name="footage_1" class="footage" /></label>
            <select name="fenceHeight_1" class="fenceHeight">
                <!--got rid of "select" from the value. not needed at all-->
                <option value="">Select Fence Height</option>
                <!--got rid of the ids completely. the numbers from the values are all you need-->
                <option value="6">6 Ft.</option>
                <option value="8">8 Ft.</option>
            </select>
        </fieldset>
        <fieldset class="post">
            <legend><strong>Post Type</strong>

            </legend>
            <label>Post Quantity:
                <input type="postQuantity" name="postQuantity_1" class="postQuantity" value="" />
            </label>
            <select name="postMeasurements_1" class="postMeasurements">
                <option value="">Select Post Measurements</option>
                <option value="23/8 x .065 x 8">2 3/8 x .065 x 8</option>
                <option value="23/8 x .095 x 8">23/8 x .095 x 8</option>
            </select>
        </fieldset>
    </div>
</fieldset>
<div>
    <input type="button" id="btnAddFence" value="Add Another Fence" />
    <input type="button" id="btnDelFence" value="Remove Fence" />
</div>


    </form>

JS:

//Quantity for Posts
    $("[class^='footage']").bind('keypress keydown keyup change', function(){
            var footage = parseFloat($(this).val(),10);
            var total = '';         
            var parts = $(this).attr('name').split("_");
            var fenceNumber = parts[1];

            if(!isNaN(footage)){
                total = Math.ceil(footage /7);
                $(":input[name='postQuantity_" + fenceNumber + "'" + ']').val(total.toString());
            } else {
                $(":input[name='postQuantity_" + fenceNumber + "'" + ']').val("");
            }
        });

//Dynamic Fence Input Fields
$('#btnAddFence').click(function () {

    // create the new element via clone()
    var newElem = $('.inputFence:last').clone();

    // insert the new element after the last "duplicable" input field
    $('.inputFence:last').after(newElem);

    // enable the "remove" button
    $('#btnDelFence').removeAttr('disabled');

    //get the input name and split into array (assuming your clone is always last)
    var parts = $('.fenceHeight:last').attr('name').split("_");
    //change the second element of the array to be one higher
    parts[1]++;
    //join back into a string and apply to the new element
    $('.fenceHeight:last').attr('name', parts.join("_"));

    //do the same for other two inputs
    parts = $('.postQuantity:last').attr('name').split("_");
    parts[1]++;
    $('.postQuantity:last').attr('name', parts.join("_"));

    parts = $('.postMeasurements:last').attr('name').split("_");
    parts[1]++;
    $('.postMeasurements:last').attr('name', parts.join("_"));

    parts = $('.footage:last').attr('name').split("_");
    parts[1]++;
    $('.footage:last').attr('name', parts.join("_"));


    // business rule: you can only add 5 names
    //if (newNum == 5)
    //$('#btnAdd').attr('disabled','disabled');
});

$('#btnDelFence').click(function () {
    //remove the last inputFence
    $('.inputFence:last').remove();

    // if only one element remains, disable the "remove" button
    if ($('.inputFence').length == 1) $('#btnDelFence').attr('disabled', 'disabled');
});

$('#btnDelFence').attr('disabled', 'disabled');

Answer 1

The jsfiddle is wrong

Anyway, you are using .bind method which is bind event handlers to currently existing elements. You can use .live method which is working for selector instead of elements, but this is deprecated in version 1.7, and removed in 1.9

As of http://api.jquery.com/bind/

For more flexible event binding, see the discussion of event delegation in .on() or .delegate().

Hope this helps

P.S. Right example without using deprecated methods

$('form').on('keypress keydown keyup change',"[class^='footage']", function(){});

http://jsfiddle.net/TwH5n/7/

Answer 2

I think you want somethign like this:

http://jsfiddle.net/TwH5n/3/

the line I changed was:

$(document.body).on('keydown', '[class^="footage"]'

this binds the event to all future '[class^="footage"]' elements

ideally you would not do this on body since its not efficient. find a closer parent, or attach the event to each clone upon creation.