Jquery Dropdown select update input field on cloned forms

So i have a form that I'm dynamically cloning with Jquery .clone. So when a user selects a choice in the drop down menu depending on what the value is, it will update a text box with a value automatically while still allowing the user to change they value if they don't agree with whats there. The code that i have updates the fields but it is updating all input fields with the id i specify i have tried referencing the parent item then looking for the next input box with an id. I'm not sure if maybe I'm processing this wrong in my head. Any help would be appreciated.

My form code:

  <div id="test">
        <span>
            <label>
                File Type:
               <select id="book_type")
                   <option value="1">1</option>
                   <option value="2">2</option>
                   <option value="3">3</option>
              </select>
            </label>
            <label>
              Book ID<input type="text" id="book_id" name="book_id" />  
            </label>
            <label>
                Tray Number:&nbsp;<input type="text" name="tray_number" required id="tray_number" class="tray_nu" placeholder="Required" value="" />
            </label>
            <label>
                Comments: <input type="text" name="comments" id="comments" value="" />
                <input type="button" id="delBttn" name="delBttn" disabled value="X" />
             </label>
        </span>
    </div>
    <div id="new_section"></div>
<input type="button" id="addbutton" value="Add Another Book" />

My Copy Code (Which works great) and my change code(this is not working properly)

$(document).ready(function () {
    $("#addbutton").click(function(){
        var clone = $("#test").clone(true).insertBefore("#new_section:last");
        clone.find('[id*="delBttn"]').attr('disabled', false);
        clone.find('[id*="book_type"]').val('');
        clone.find('[id*="comments"]').val('');
    });

$("#delBttn").click(function(e) {
    $(this).closest("span").remove();
    e.preventDefault();
});
$("#f_types").change(function(){
    var book_type =  $(this).val();
    if(book_type === '2'){
        $('span').parent().find("#tray_number").val('2');
    }
});

}); //end of DOM

So now when you click on the dropdown box and change it to option 2, its filling all boxes with the value of option 2. I'm trying to get it to only change the value of tray number in the same row as the drop down box.