Div based on selection not working, when new selection line was added

i want to create form when there will be possibility to add/remove additional selection rows, but all of this new selection should have possibility to show DIV depends on selected option.

Everything is working fine for first row which is loaded with page, DIV is showing input form, normal text or another selection (this one not need to show anything in additional DIV) based what we choosed.
But for added rows nothing happens after selection.

Any idea how to fix it or use another solution?

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div style="width:100%;">
Replace:
        <form>
            <div class="">
                <div class="col-lg-10">
                    <div id="row">
                        <div class="input-group m-3">
                            <select class="custom-select custom-select-sm" name="test" id="type"><option>select one</option><option value="id">ID:</option><option value="client">Client:</option><option value="file">File:</option></select>&nbsp;&nbsp; with &nbsp;&nbsp;
                            <div id="values"></div>
                            <div class="input-group-prepend" style="margin-left: 20px;">
                                 <button class="btn btn-danger" id="DeleteRow" type="button">
                                     <i class="bi bi-trash"></i>
                                     Delete row
                                 </button>
                             </div>
                        </div>
                    </div>

                    <div id="newinput"></div>
                    <br />
                    <button id="rowAdder" type="button" class="btn btn-dark">
                        <span class="bi bi-plus-square-dotted">
                        </span> ADD row
                    </button>
                </div>
            </div>
        </form>
    </div>

 $("#rowAdder").click(function () {
            newRowAdd =
            '<div id="row">' +
            '<div class="input-group m-3">' +
            '<br /><select class="custom-select custom-select-sm" name="test" id="type"><option>select one</option><option value="id">ID:</option><option value="client">Client:</option><option value="file">File:</option></select>' +
            '&nbsp;&nbsp; with &nbsp;&nbsp;' +
            '                <div id="values"></div>' +
            '                <div class="input-group-prepend" style="margin-left: 20px;">' +
            '                     <button class="btn btn-danger"' +
            '                         id="DeleteRow" type="button">' +
            '                         <i class="bi bi-trash"></i>' +
            '                         Delete row'+
            '                     </button> </div>' +
            '</div> </div>';

            $('#newinput').append(newRowAdd);
        });

        $("body").on("click", "#DeleteRow", function () {
            $(this).parents("#row").remove();
        })

Example:
http://jsfiddle.net/3th96bac/

>Solution :

Please check below working link for your question.

http://jsfiddle.net/kairavthakar2016/nkrqahpf/11/

Please modify your HTML and instead of ID please use the class and replace the jQuery with class name in the above mentioned example