Append input to the correct category JQUERY

Question

I want the items I add to go under the correct category and only one at a time. But it appears I get products going into the dairy and fruit section at the same time. Can anyone please assist me? Here is my code:

 $('#catty').change(function () { if ($(this).val() == 'Dairy') { $('#product-info').keydown(function (e) { if (e.keyCode == 13) { var add = $('#product-info').val(); $('.dairy-product').append('<li>' + add + '</li>'); } }) } }); $('#catty').change(function () { if ($(this).val() == 'Fruits') { $('#product-info').keydown(function (e) { if (e.keyCode == 13) { var add = $('#product-info').val(); $('.fruit-product').append('<li>' + add + '</li>'); } }) } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="catty" class="form-control" value="Select"> <option hidden >Select Catergory</option> <option>Dairy</option> <option>Frozen Foods</option> <option>Fruits</option> <option>Vegetables</option> </select> <div class="form-group"> <input type="text" class="form-control" id="product-info" placeholder="Item Name"> </div> <button type="button" id="btn1" class="btn btn-primary">Add Item</button> </form> </div> <div class="panel-group col-xs-12"> <div class="category"> <div class="my-panel parent"> <p class="description" id="dairy">Dairy</p> <a href="#" class="add-item"> <i class="fa fa-plus-circle" aria-hidden="true"></i> </a> </div> <ol class="dairy-product"></ol> </div> <div class="category"> <div class="my-panel parent"> <p class="description" id="fruits">Fruits</p> <a href="#" class="add-item"> <i class="fa fa-plus-circle" aria-hidden="true"></i> </a> </div> <ol class="fruit-product"></ol> </div> 

Answer 1

 $('#product-info').keydown(function(e) { var selectid = $('#catty option:selected').text().toLowerCase() if (e.keyCode == 13) { var add = $('#product-info').val(); $("."+selectid +'-product').append('<li>' + add + '</li>'); } }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="catty" class="form-control" value="Select"> <option hidden>Select Catergory</option> <option>Dairy</option> <option>Frozen Foods</option> <option>Fruits</option> <option>Vegetables</option> </select> <div class="form-group"> <input type="text" class="form-control" id="product-info" placeholder="Item Name"> </div> <button type="button" id="btn1" class="btn btn-primary">Add Item</button> </form> </div> <div class="panel-group col-xs-12"> <div class="category"> <div class="my-panel parent"> <p class="description" id="dairy">Dairy</p> <a href="#" class="add-item"> <i class="fa fa-plus-circle" aria-hidden="true"></i> </a> </div> <ol class="dairy-product"></ol> </div> <div class="category"> <div class="my-panel parent"> <p class="description" id="fruits">Fruits</p> <a href="#" class="add-item"> <i class="fa fa-plus-circle" aria-hidden="true"></i> </a> </div> <ol class="fruits-product"></ol> </div> 

1. Change OL class from fruit to fruits.
2. Dont need to call the change function of the select, just get the current selected value then use it as parameter for the enter key.
3. Make sure to add validation if nothing was selected in select

Answer 2

You have two onchange event handlers for the element with id catty . And also two event handlers for keydown on the same element in those two onchange handlers. Modify your code, so your handlers are simplified:

$('#product-info').keydown(function(e) {
    if (e.keyCode == 13) {
        var add = $('#product-info').val();
        var value = $("#catty").text(); 
        if(value !== '') {
           $('.' + value.toLowerCase() + '-product').append('<li>' + add + '</li>');
        }
    }
});