Cacher is the code snippet organizer for pro developers

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="phone_number_form" class="hidden">
    <p>
        <span>Phone number</span> : <input type="text" name="phone_number" /> 
        <input type="button" id="remove_phone_number" value="Remove" />
    </p>
</div>
<form>
    <p>
        Phone number : <input type="text" name="phone_number1" /> 
    </p>
    <p>
        <input type="button" value="Add phone number" id="add_phone_number" />
    </p>
</form>

$(document).ready(function(){
    $("#add_phone_number").click(function(){
        $(this).parent().before($("#phone_number_form").clone().show());
        reNumberInputs();
    });

    $("form").on("click", "[id^='remove_phone_number']", function(){
        $(this).closest("div").remove();
        reNumberInputs();
    });    
});

function reNumberInputs() {
    $("input[type='text']:visible").each(function(index, element) {
        var displayIndex = (index + 1).toString();
        element.id = "phone_number" + displayIndex;
        element.name = "phone_number" + displayIndex;
        if (index > 0) {
            $(this).prev("span").html("Phone number " + displayIndex);
            $(this).next("input").prop("id", "remove_phone_number" + displayIndex).prop("name", "remove_phone_number" + displayIndex);
        }
    });
}