如何用javascript创建具有顺序名称的div？

我得到这段代码是为了在屏幕上添加动态输入。
我需要解析输入名称

已知问题：
所有输入名称都相同：供应商产品1
当我删除一个输入时，它只删除第一个输入，而不是所选的输入

HTML

普罗杜托斯
诺姆·多普罗杜托
阿迪西奥纳生产商

Javascript

$('.add').click(function() {
    $('.block:last').before(' <div class="block" id="block"><div class="widget-content nopadding"><div class="control-group"><label class="control-label">Nome do produto</label><div class="controls"><input type="text" maxlength="140" name="supplierproduct1" id="supplierproduct1">  <span class="remove btn btn-danger"> Excluir </span>  </div></div></div></div>');
});
$('.optionBox').on('click','.remove',function() {
    $("#block").remove();
});

$（'.add'）。单击（函数（）{
$（'.block:last'）。之前（'Nome do produto Excluir'）；
});
$（'.optionBox'）。在（'单击'，'.remove'，函数（）上{
$（“#块”）.remove（）；
});

对不起，伙计们，我正在做一个系统来帮助我的商店，但我仍在学习这些东西，所以我无法单独完成，已经搜索过了，但无法使用锯子做任何事情。
谢谢

编辑：

解决方案：
html

普罗杜托斯
诺姆·多普罗杜托
阿迪西奥纳生产商

js

$（'.add'）。单击（函数（）{
$（'.block:last'）。之后（'Nome do produto Excluir'）；
});
$（'.optionBox'）。在（'单击'，'.remove'，函数（）上{
$（this）.closest（'.block'）.remove（）；
});

您没有在此处使用任何名称我知道，我需要先解决名称问题，javascript应该创建动态输入名称，但我不知道如何创建。在此之后，我必须添加phpy您的问题和标题与您需要编辑的内容不同，因为类名是静态的，每次单击按钮时您都不会做任何更改

$('.add').click(function() {
    $('.block:last').before(' <div class="block" id="block"><div class="widget-content nopadding"><div class="control-group"><label class="control-label">Nome do produto</label><div class="controls"><input type="text" maxlength="140" name="supplierproduct1" id="supplierproduct1">  <span class="remove btn btn-danger"> Excluir </span>  </div></div></div></div>');
});
$('.optionBox').on('click','.remove',function() {
    $("#block").remove();
});

<div class="widget-box">
    <div class="widget-title"> <span class="icon"> <i class="icon-info-sign"></i> </span>
        <h5>Produtos</h5>
    </div>
    <div class="optionBox">
        <div class="block">
            <div class="widget-content nopadding" id="block">
                <div class="control-group">
                    <label class="control-label">Nome do produto</label>
                    <div class="controls">
                        <input type="text" maxlength="140" name="supplierproduct[]" id="supplierproduct[]"> 
                    </div>
                </div>
            </div>
        </div>
        <span class="add btn btn-success"> Adicionar produto </span>
    </div>
</div>

$('.add').click(function() {
    $('.block:last').after(' <div class="block" id="block"><div class="widget-content nopadding"><div class="control-group"><label class="control-label">Nome do produto</label><div class="controls"><input type="text" maxlength="140" name="supplierproduct[]" id="supplierproduct[]">  <span class="remove btn btn-danger"> Excluir </span> </div></div></div></div>');
});
$('.optionBox').on('click','.remove',function() {
    $(this).closest('.block').remove();
});