При первом открытии в сообщении отображается выбранное сообщение. новое сообщение не появляется, когда я нажимаю кнопку Добавления. В чем проблема

ДЕМОНСТРАЦИЯ

Выберите сообщение из списка с правой стороны — это ввод сообщения. добавить, что 2-й раз, когда я нажимаю, сообщение не приходит, когда я выбираю сообщение в списке

HTML

 <table class="color"  cellpadding="2" cellspacing="2" id="myTable">
    <tr class="user">
        <td >
            <select name="a" id="selectMe">
                <option value="" selected></option>
                <option value="1">Message</option>
                <option value="2">Not Message</option>
            </select>
        </td>

        <td id="group">
            Message</td>
    </tr>

    <tfoot>
        <tr>
            <td colspan="5" style="text-align: left;">
                <input type="button" id="addrow" value="Add Rows" />
            </td>
        </tr>

    </tfoot>
</table>
  

CSS

 <style>
#group {
    display: none;
    padding: 10px;
    border: 1px solid #ddd
}
</style>
  

JS

 $(document).ready(function () {
            var counter = 0;

            $("#addrow").on("click", function () {

                counter = $('#myTable tr').length - 2;

                var newRow = $("<tr>");
                var cols = "";

                cols  = '<td><select id="selectMe" name="a" ><option value="" ></option><option value="1" >Message</option><option value="2">Not Message </option></select></td><td id="group">mesage<</td>';

                cols  = '<td><input type="button"  value="x" ></td>';
                newRow.append(cols);
                if (counter == 4) $('#addrow').attr('disabled', true).prop('value', "You've reached the limit");
                $("table.color").append(newRow);
                counter  ;
            });




            $("table.color").on("click", ".buttons", function (event) {
                $(this).closest("tr").remove();
                calculateGrandTotal();

                counter -= 1
                $('#addrow').attr('disabled', false).prop('value', "Add Rows");
            });


        });




$('.user').each(function(){
    var parent = this,
        group = $('#group', parent);
    $('#selectMe', parent).on('change', function(){
        var indis = $(':selected', this).index();
        if ( indis > 0 ){
            indis -= 1;
            group.hide().filter(':eq('   indis   ')').fadeIn(300);
        } else {
            group.hide();
        }
    });
});
  

чего я хочу. Когда я нажимаю кнопку добавить, чтобы также публиковать новые сообщения

Вам нужно делегировать click событие и указать целевой тип ввода ( button ):

     $("table.color").on("click", "input[type='button']", function (event) {
        $(this).closest("tr").remove();
        calculateGrandTotal();

        counter -= 1
        $('#addrow').attr('disabled', false).prop('value', "Add Rows");
    });
  

ДЕМОНСТРАЦИЯ

Ваш $(".user").each() цикл работает только с элементами, которые присутствуют при первой загрузке страницы. DIVs, которые добавляются позже с помощью кнопки добавить, не обрабатываются, поэтому change обработчик никогда не добавляется.

Для реализации привязки событий к динамически добавляемым элементам необходимо использовать делегирование. Кроме того, вы не должны присваивать элементам одинаковые идентификаторы, вы должны использовать классы для похожих элементов. Так что измените id="selectMe" и id="group" на class="selectMe" и class="group" в HTML и измените CSS для использования .group . Затем обработчик щелчка становится:

 $('.color').on('change', '.selectMe', function () {
    var group = $(this).closest("td").siblings(".group");
    var indis = $(':selected', this).index();
    if (indis > 0) {
        indis -= 1;
        group.hide().filter(':eq('   indis   ')').fadeIn(300);
    } else {
        group.hide();
    }
});
  

ДЕМОНСТРАЦИЯ