可以't在javascript中递减var

我是Javascript的新手，正在构建一个动态Web表单。我的表在重命名新行（添加带有"index"的新名称）方面工作得很好，但当我删除行并创建新行时，它不起作用，因为我的"index--；"不起作用。注意，当我说桌子只是一种说话方式。。。我的代码出了什么问题？

代码段

    $(document).ready(function() {
    
            var index = 0; // 
    
    
        $('.multi-field-wrapper').each(function() {
            var $wrapper = $('.multi-fields', this);
            $(".add-field", $(this)).click(function(e) {
                index++;
                $novaLinha = $('.multi-field:first-child', $wrapper).clone(true)
                $novaLinha.appendTo($wrapper).find('input').val('').focus();
                $novaLinha.find('label').attr('class', 'hideMobile').end();
                $novaLinha.find('[id="itemLinha"]').attr('class', 'row top-buffer-novoItem col-md-12 control-group' + index).end();
                $novaLinha.find('[name="insumo"]').attr('name', 'insumo ' + index).end();
                $novaLinha.find('[name="detalhe"]').attr('name', 'detalhe ' + index).end();
                $novaLinha.find('[name="quantidade"]').attr('name', 'quantidade ' + index).end();
                $novaLinha.find('[name="unidade"]').attr('name', 'unidade ' + index).end();
            });
            $('.multi-field .remove-field', $wrapper).click(function() {
                if ($('.multi-field', $wrapper).length > 1)  {    // Quando se apaga a primeira linha quando há mais de uma, não aparece o título da tabela no desktop          
                    index--;
                    $(this).parent().parent().parent('.multi-field').remove();
                }
            });
        });
    
    };

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="multi-field-wrapper">
        <div class="row top-buffer-inicio " >
            <div class="multi-fields col-md-12">
                <div class="multi-field">
                    <div class = "row top-buffer-novoItem col-md-12 control-group" id="itemLinha">
                        <div class="col-md-3 form-group">
                            <label for="insumo">INSUMO</label>                                                    
                            <div data-name="insumo">
                                <input type="text" name='insumo'  placeholder='Ex. Bloco de Concreto' class="form-control"/>
                            </div>
                        </div>
                        <div class="col-md-4 form-group">
                            <label for="detalhe"> DETALHE </label> 
                            <div class = "" data-name="detalhe">
                                <input type="text" name='detalhe' placeholder='Ex. Estrutural 14x19x39' class="form-control"/>
                            </div>
                        </div>
                        <div class="col-md-1 form-group">
                            <label for="quantidade"> QTD </label>
                            <div class = "" data-name="quantidade">
                                <input type="text" name='quantidade' placeholder="Ex. 55" class="form-control"/>
                            </div>
                        </div>
                        <div class="col-md-3 form-group">
                            <label for="unidade"> UNIDADE </label>
                            <div class = "" data-name="unidade">                             
                                <input type="text" name='unidade'  placeholder='Ex. Unitário' class="form-control"/>
                            </div>
                        </div>
                        <div class="col-md-1 col-xs-12 ">
                            <label > </label>    
                            <div class = "remove-field ">                                                                           
                                <div name="remove" class='pull-right btn btn-danger btn-block glyphicon glyphicon-remove '></div>
                            </div>
                        </div> 
                    </div>
                </div>
            </div>
        </div>                                                                                                        
        <div class="row top-buffer-novoItem">
            <div class="col-md-12">                                          
                <div class="col-md-2 pull-right form-group">
                    <div id="add_row" class="add-field btn btn-grey pull-right">Novo Item</div>
                </div>
            </div>
        </div>
    </div>