jquery to show table row if input has a value. wrong keyup function

Question

I have some table rows with text inputs inside. Each row has a unique name fp0,fp1,fp2,fp3... The input is getting a value from a php array, but sometimes the array is empty, and has not value. If the input has a value, then the TR should show.

HTML:

<table>
    <tr>
        <td>This works fine<br>as long as has no default values set like a PHP variable</td>
    </tr>
    <tr id="fp0">
        <td>
            <label>INPUT0:</label>
            <input type="text" class="fp" name="fp_name0" id="fp_name0" value="">
            <td>
    </tr>
    <tr id="fp1">
        <td>
            <label>INPUT1:</label>
            <input type="text" class="fp" name="fp_name1" id="fp_name1" value="">
            <td>
    </tr>
    <tr id="fp2">
        <td>
            <label>INPUT2:</label>
            <input type="text" class="fp" name="fp_name2" id="fp_name2" value="">
            <td>
    </tr>
</table>
<br>
<br>
<table>
    <tr>
        <td>If it has a value it should display and +1 empty input on the bottom.<br>
            If you delete INPUT10 Then INPUT11 Should hide.<br>
        </td>
    </tr>
    <tr id="fp10">
        <td>
            <label>INPUT10:</label>
            <input type="text" class="fp" name="fp_name10" id="fp_name10" value="VALUE10">
            <td>
    </tr>
    <tr id="fp11">
        <td>
            <label>INPUT11:</label>
            <input type="text" class="fp" name="fp_name11" id="fp_name11" value="">
            <td>
    </tr>
    <tr id="fp12">
        <td>
            <label>INPUT12:</label>
            <input type="text" class="fp" name="fp_name12" id="fp_name12" value="">
            <td>
    </tr>
</table>

Javascript:

$(document).ready(function () {
/*AS LONG AS NO VALUE IS SET, EVERYTING WORKS FINE*/
if ($("#fp_name0").val() !== "") {
    $('#fp1').show();
} else {
    $("#fp_name0").keyup(function () {
        if ($(this).val() !== "") {
            $("#fp1").slideDown();
        } else {
            $("#fp1").slideUp();
            $("#fp2").slideUp();
            $("#fp_name1").val("");
            $("#fp_name2").val("");
        }
    });
};
if ($("#fp_name1").val() !== "") {
    $('#fp2').show();
} else {
    $("#fp_name1").keyup(function () {
        if ($(this).val() !== "") {
            $("#fp2").slideDown();
        } else {
            $("#fp2").slideUp();
            $("#fp_name2").val("");
        }
    });
};

/*THIS HAS VALUES AND HAS PROBLEMS*/

if ($("#fp_name10").val() !== "") {
    $('#fp11').show();
} else {
    $("#fp_name10").keyup(function () {
        if ($(this).val() !== "") {
            $("#fp11").slideDown();
        } else {
            $("#fp11").slideUp();
            $("#fp12").slideUp();
            $("#fp_name11").val("");
            $("#fp_name12").val("");
        }
    });
};

if ($("#fp_name11").val() !== "") {
    $('#fp12').show();
} else {
    $("#fp_name11").keyup(function () {
        if ($(this).val() !== "") {
            $("#fp12").slideDown();
        } else {
            $("#fp12").slideUp();
            $("#fp_name12").val("");
            }
        });
    };
});

Its a bit hard to explain, but here is a jsfiddle of the code.

Answer 1

This code worked finally:

$(document).ready(function () {
    if ($("#fp_name10").val() !== "") {
        $('#fp11').show();
        $("#fp_name10").keyup(function () {
            if ($(this).val() !== "") {
                $("#fp11").slideDown();
            } else {
                $("#fp11").slideUp();
                $("#fp12").slideUp();
                $("#fp_name11").val("");
                $("#fp_name12").val("");
            }
        });
    } else {
        $("#fp_name10").keyup(function () {
            if ($(this).val() !== "") {
                $("#fp11").slideDown();
            } else {
                $("#fp11").slideUp();
                $("#fp12").slideUp();
                $("#fp_name11").val("");
                $("#fp_name12").val("");
            }
        });
    };

    if ($("#fp_name11").val() !== "") {
        $('#fp12').show();
        $("#fp_name11").keyup(function () {
            if ($(this).val() !== "") {
                $("#fp12").slideDown();
            } else {
                $("#fp12").slideUp();
                $("#fp_name12").val("");
            }
        });
    } else {
        $("#fp_name11").keyup(function () {
            if ($(this).val() !== "") {
                $("#fp12").slideDown();
            } else {
                $("#fp12").slideUp();
                $("#fp_name12").val("");
            }
        });
    };
});