Numbering, Reordering and Relating Selected Regions on an Image - RoR & JavaScript

➤ Project:

I have half-completed web application by which we will digitize the entries and subentries of hundreds of old Ottoman dictionaries printed mostly in the 19th century.

➤ Task:
In this project, I need the implementation of a feature. Please watch these two screencasts for the details of the task.

https://youtu.be/spn1OdUa8eE
https://youtu.be/ekYdyoMkZus

Basically, I need these:
1) A button, “Serialize”, when clicked the selected regions will be numbered.
2) A vertical panel in which the snippets, which are the selected regions, are displayed in order.
3) Ability to drag them up and down to be able to change their orders.
4) As I change their order, the numbers on the regions should be updated.
5) Ability to be able select two regions by pressing CTRL+Left Click and relating them two each other pressing Enter on physical keyboard.
6) Because they are related to each other, they will be displayed side by side in the subsequent tasks, where the images are shown to the users and the users are expected to type them.

➤ Technical details

Back End:

Ruby on Rails developer
PostgreSQL DB
Google-cloud-storage knowledge preferred.

Front End:

Javascript developer with experience working with HTML 5 Canvas
Bootstrap knowledge preferred.

➤ Developer

As the developer you should be experienced mastering both coding and DevOps. Being smart is also critical, otherwise development process turns out to be quite painful one both for me and the developer.

➤ Time

The project should be fully completed in 14 calendar days as of the first day of the contract.

However, I am open to negotiate the duration if you convince me with cogent arguments.

You should be spending at least 30 hours a week for the project.

➤ Budget

The budget for this project is $1,000.

➤ Long-Term Collaboration
If you successfully deliver this task on time, I would like to work with you on this entire project on hourly basis.